Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://yersel500.github.io/ES6-awesome-books/

"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list. Built with JavaScript and ES6 modules..
https://yersel500.github.io/ES6-awesome-books/

css html javascript

Last synced: about 2 months ago
JSON representation

"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list. Built with JavaScript and ES6 modules..

Awesome Lists containing this project

README 

        
![](https://img.shields.io/badge/Microverse-blueviolet)



# ES-6 Awesome Books



> Solo programming project for module 2 week 2 of the Microverse Program.



![Desktop Version](https://image.prntscr.com/image/pd4dhvGDRPiTDd6wbZ77-w.png)

![Mobile Version](https://image.prntscr.com/image/yab8x7XcRkaRajQNsy_pZw.png)



"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list.



### First requirements:



Project requirements



    Implement only a basic UI with plain HTML:



Basic UI



    Create a collection that keeps a list of books (hint: you can use an array of objects for that).

    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 (hint: you can use the array filter() method).

    Display all books saved in the collection in the top part of the page.

    Make sure that when a user clicks the "Add" button:

        A new book is added to the collection.

        The new book is displayed in the page.

    Make sure that when a user clicks the "Remove" button:

        The correct book is removed from the collection.

        The correct book dissapears from the page.

    Make sure that data is preserved in the browser's memory by using localStorage.

    To debug your application, you can use console.log(). Remember to remove debugging code before pushing your code to the remote repository.

    We are using luxon library to set the date



TIP: If you separated the code in multiple files and you you have the following issues with the linter: complaining about having multiple classes at the same file, or an unused variables, disable the linter check for that rule in the file with a /_ eslint-disable rule-you-want-to-disable _/ .



Check the ESLint documentation for more details on how.



> To setup the project on your machine:



## Getting Started



Clone the repository and setup the linter



## Prerequisites



- npm ( Node Package Manager )

- git and Github Account



### Setup



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



- Open terminal

- Change the directory you want put the repo

- Then run

  i. Run git clone [email protected]:mengiefen/awesome-books.git

  ii. cd repo-name/



### Install



- **Webhint** linter



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



- **Stylelint** linter



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



- **ESLint** linter



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



### Run tests



- **Webhint** linter -`npx hint .` on the root of your directory of your project.

- **Stylelint** linter

  - `npx stylelint "**/*.{css,scss}"` on the root of your directory of your project.

- **ESLint** linter

  - `npx eslint .` on the root of your directory of your project.



### Second requirements:



> Use JavaScript classes instead of objects and arrays.



    You can use objects and arrays, but do it inside classes.

    Create class methods to add and remove books.

    Maintain all of the original functionality of the application (i.e. no bugs were introduced while refactoring).

    Don't use any library or framework, use only plain JavaScript.

    Add CSS styles to the application to make it match the wireframe proposed by Microverse



Basic UI



    You can use the styles of your choice (colors, fonts, backgrounds, etc.), but try to follow the general layout.

    Concentrate on the general layout, rather than the details.



## Built With



- HTML

- CSS

- Javascript

- Love



## Live Demo



[Live Demo Link](https://yersel500.github.io/ES6-awesome-books/)



## Authors



👤 **Yersel Hurtado**



- GitHub: [@yersel500](https://github.com/yersel500/)

- Twitter: [@YerselHurtado](https://twitter.com/YerselHurtado)

- LinkedIn: [Yersel Hurtado](https://www.linkedin.com/in/yersel-hurtado/)



## 🤝 Contributing



Contributions, issues, and feature requests are welcome!



## Show your support



Give a ⭐️ if you like this project!



## Acknowledgments



- A big thank you to Microverse, for providing me the knowledge and tools to finish this project.

- An even bigger thank you to all my coding partners who helped me get here.



## 📝 License



## Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)



Disclaimer: This is a human-readable summary of (and not a substitute for) the [license](https://creativecommons.org/licenses/by-nc/4.0/legalcode).



You are free to:



    Share — copy and redistribute the material in any medium or format

    Adapt — remix, transform, and build upon the material



    The licensor cannot revoke these freedoms as long as you follow the license terms.



Under the following terms:



    Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.



    NonCommercial — You may not use the material for commercial purposes.



    No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.



Notices:



    You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation.

    No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material.