Project Name : Awesome books

"Awesome books" is a simple website that displays a list of books, It allows users to add and remove books from that list. By building this application, you will learn how to manage data using JavaScript. Thanks to that your website will be more interactive. You will also use a medium-fidelity wireframe to build the UI.is a simple website that displays a list of books and allows you to add and remove books from that list. It uses a simple GUI (medium-fidelity wireframe) and relies on DOM manipulation in pure JS and using local storage.

Built With

• HTML
• Basic CSS (medium-fidelity wireframe)
• Modular JavaScript and ES6 syntax
• Linters (Lighthouse, Webhint, Stylelint, Eslint)
• Git/GitHub work-flow

🔴 Live Demo

Live Demo Link

Project requirements

• Setup your project:

  • Create a new directory and initialize it with git.
  • Use npm init -y command to create package.json file.
  • Linters configuration.
  • Create the entry point for your JavaScript code called index.js
  • Create index.css file for your styles.
  • Create the main index.html file. Link your index.js and index.css files there.
  • Create a directory called modules.

• Re-create your Awesome books app following the rules:

  • Use ES6 syntax.
  • Divide your code into modules. Save each module in a separate file in the modules dir. Import modules in the index.js file. For this exercise - the more modules the better!
  • Keep all funcionalities of the app without errors.
  • Refactor your methods and functions to arrow functions.
  • Use let and const in a correct way.

• Display the current date below the navigation bar.

  • For this requirement you should use a library Luxon
  • Download the script and save it to your project.
  • Import it as a module.
  • See the article Get the current date and time. Your task here is to use a new tool effectively with little externally curated support. Exactly as you will do in your future job.

Getting Started

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

• Open terminal
• Clone this project by the command:

$ git clone git@github.com:khitermedachraf/Awesome-books-ES6.git

• Then go to the main folder using the next command:

$ cd Awesome-books-ES6.git

• Finally, run diplay the index.html file in your local browser, or also, you can use Live Server in Visual Studio Code.

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

Prerequisites

• IDE to edit and run the code (We use Visual Studio Code 🔥).
• Git to versionning your work.

Install

• npm install --save-dev hint@6.x
• npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
• npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x

Usage

• For anyone who wants to practice html5, css3 and or vanilla JavaScript
• For anyone who wants to create his own Web devlopment course site.

Run tests

• run: npx hint .
• run: npx stylelint "**/*.{css,scss}"
• run: npx eslint .

Authors

👤 Achraf KHITER

• GitHub:
• LinkedIn:
• Gmail:
• Twitter:
• Instagram:
• Facebook:

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• Hat tip to anyone whose code was used
• Inspiration
• Microverse program
• My standup team
• Code partner

📝 License

This project is MIT licensed.