mike11199/library-project

Library-Project

A tracker that allows books to be stored in a grid format and marked as read, or deleted from the list. Supports book cover images if an URL is added in the add book dialog form pop up.

Concepts learned from this project

-Adding a form in a div that is not visible when the page first loads but can toggle visibility later on.

-Adding e.preventDefault() so that values can be grabbed from the form and stored in variables ovverriding default form behavior.

-Using a constructor so that variables from the form can be saved in a new object created from that constructor.

-Using document.createElement and the .classList.add or .classList.remove to create/remove HTML elements such as divs, buttons, p tags, and add classes to them.

-Using document.appendChild to add a created element to the HTML DOM.

-Using relative positioning, event listeners to trigger opacity, and z-index so that the book title, pages, and author and buttons are only displayed when you hover over the book card's thumbnail.

-Learned how to save an array of objects to local storage by stringifying an array of objects into a JSON file. Then learned how to retrieve that JSON file and parse it back into an array, and then back into an array of objects by looping over the array and calling the object constructor. This is so that users' books are loaded when returning to the website.

-Added a button to clear all local storage, made delete buttons on cards also delete from local storage and card div itself with parentNode.removeChild, and added a button to load a sample library of books.

Additional Screenshots