https://github.com/gregolive/library

Track your reading in a personal library.
https://github.com/gregolive/library

css html javascript

Last synced: 18 days ago
JSON representation

Track your reading in a personal library.

• Host: GitHub
• URL: https://github.com/gregolive/library
• Owner: gregolive
• Created: 2022-02-06T09:37:00.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-08T05:06:48.000Z (almost 3 years ago)
• Last Synced: 2023-07-25T07:27:39.187Z (over 1 year ago)
• Topics: css, html, javascript
• Language: JavaScript
• Homepage: https://gregolive.github.io/library/
• Size: 35.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Library

Keep track of the books you've read and the books you want to read with your own personal library.

[Live demo](https://gregolive.github.io/library/) 👈

## Functionality

- Styling via Bootstrap

- Javascript contructors keep track of individual books and the library

- Library object inherhits functions via prototyping

- Local storage saves the user's library so it can be rebuilt on a page refresh

- Event listeners allow the user to dynamically add a book, change a books "read status", or  delete a book from the library

- Form validation via Javascript's Constraint validation API

## Reflection

This was my first project back in Javascript after spending some time learning Ruby and building projects with Ruby on Rails. The goal of this project was to build objects with constructors and then define functions on the prototype of the objects. I immeditely saw the benefits of using constructors and prototyes in Javascript because my JS file felt much neater and easier to read than I remember from my previous projects.

The main problem I ran into with this project was trying to figure out how to persist the library on a page reload. The solution I chose was to use localStorage to save the Library using JSON.stringify(), since localStorage requires that the key value pairs be strings. LocalStorage allowed the library to be "personal" to the user.

After instantiating the Library object on a page load the checkLocalStorage function checks if there is anything saved in localStorage. If so, JSON.parse() is used to re-create the array of Book objects and set this array to the Library's books constant. Otherwise the books constant is left empty.