Skip to content

Latest commit

 

History

History
193 lines (133 loc) · 5.97 KB

README.md

File metadata and controls

193 lines (133 loc) · 5.97 KB

📗 Table of Contents

📖 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

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

(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 [email protected]: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 [email protected]

Stylelint installation.

  • Run the following command:

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

ESLint

  • Run

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

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

👤 Jubaer hossain maruf

(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)