📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ (OPTIONAL)
• 📝 License

📖 Awesome Books Microverse! Project

Awesome Books Microverse! project is a repository consisting of the following files:

• HTML file
• CSS file
• JS files
• Html,CSS and JS linters file

The repository also contains files for setting up linters and validators.

🛠 Built With

Tech Stack

• HTML
• CSS
• JS

Key Features

Awesome Books - HTML/CSS & JavaScript Awesome Books project

Features Added:

• Create a collection that keeps a list of books
• Create a function to add a new book to the collection, with title and author
• Create a function to remove a book from the collection
• Display all books saved in the collection in the top part of the page.
• When a user clicks the "Add" button:
  • A new book is added to the collection.
  • The new book is displayed in the page.
• When a user clicks the "Remove" button:
  • The correct book is removed from the collection.
  • The correct book dissapears from the page.
• Data is preserved in the browser's memory by using localStorage.
• JavaScript classes used instead of objects and arrays.
• Class methods created to add and remove books.
• A Navigation bar section added .
• A footer section added
• The Navigation bar contains Three content sections:
  • Books list.
  • Add book form.
  • Contact info.
• CSS styles Added to the application to make it match this wireframe.
• When a user clicks on any of the links, the main area changes to display only one of the three content sections which clicked.
• To change the contents of the page, plain JavaScript and CSS used.

(back to top)

🚀 Live Demo

• Live Demo

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Setup

Clone this repository to your desired folder:

cd my-folder git clone git@github.com:myaccount/my-project.git

Prerequisites

In order to run this project you need:

• gitHub account;
• git installed on your OS.

Install

https://github.com/microverseinc/linters-config/tree/master/html-css-js

• Installations required to run this project:

Webhint installation.

• Run the following command:

npm install --save-dev hint@7.x

Stylelint installation.

• Run the following command:

npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x

ESLint

• Run

npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x

Usage

You can use this project by cloning it to your folder and changing index.html and styles.css files.

Run tests

To run tests, run the following commands:

To track linter errors locally follow these steps:

Download all the dependencies run:

npm install

Track HTML linter errors run:

npx hint .

Track CSS linter errors run:

npx stylelint "**/*.{css,scss}"

Track JavaScript linter errors run:

npx eslint ."

Deployment

You can redeploy this project by adding new lines of code to source files.

(back to top)

👥 Authors

👤 Habtamu Alemayehu

• GitHub: @bena

👤 Jubaer hossain maruf

• GitHub:[jubaer919] (https://github.com/jubaer919)

(back to top)

🔭 Future Features

Awesome books: a complete website with navigationthis will be added.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

(back to top)

⭐️ Show your support

Give me ⭐️ If you like this project!

(back to top)

🙏 Acknowledgments

• I would like to thank Microverse program for providing me this great chance.

(back to top)

(back to top)

📝 License

This project is MIT licensed.

(back to top)