Bookshelf 📖

The 'Bookshelf' helps you to add your book to your library, to remove one particular book from your library and it also provides to user to remove all of the books in your library.

Here you can find the 🌟 Live Demo and try it for yourself!

Used Technologies

• HTML
• SaSS
• JavaScript
• VSCode

❓ Which functionalities has the Bookshelf?

• localStorage to save and remove added books

• Click + to add book to library and localStorage

  • required Book Title input from user
  • add Author input
  • add number of Pages
    • you can only add digits!
  • checbox to check if you already read the book
  • Add button to add the book, works like submit button

• Click - to remove particular book both from library and localStorage

  • when - clicked, all the books in the library starts to shake with red -
    • click red minus to remove the book
      • Note! if the '-' once clicked, the '+' button does not work. It is on purpose! If you click the '-' again, you enable adding book option again!

• Click trashcan button to remove all books from both library and localStorage

• Searchbar has the functionality to display the book item if it is found in the library

  • search through the library
    • onkeydown enables to display the book item with the given key/letter

• Click on Book icon at the top of the sidebar and '+' button, it takes you to the top of the page if there are too many books in the Library

• Tooltips for the items on the sidebar

• With the help of the ID of the book objects and the displayed books, arrangement of the localStorage becomes more structured

• Click on book to change its read status

ToDo

• edit read status and update storage