Purpose

Learning javascript via practical projects

Link to project details

I broke the project up into modules inside the src/js files.

Deployed site

This is a simple example of creating an array of books and being able to add and remove books.

Usage

Local Development

git clone https://github.com/ParamagicDev/libraryBookJS.git
cd libraryBookJS/
npm install
npm run dev

Deployment

npm install
npm run deploy

Interesting notes

DocumentFragment

This project uses Document Fragments in order to render pages. A DocumentFragment will aggregate elements in an invisible DOM so it does not trigger a rerender of the page. Only when the DocumentFragment is inserted or appended within the visible DOM will the page rerender

FormData

Because this project does not have a backend, I had to get creative as to how to aggregate data submitted via the Add Book button. The basics of how I use the FormData API is that I add a click listener onto the form button. Within this click listener, I use the event.preventDefault() function to prevent the form from submitting a GET request. After this, I then take any data that has been inserted into the form fields and use it to add a new book to the library while checking to see that each input contained a valid string.

localStorage

This repo uses localStorage to store data. I quickly learned why the Factory Function is the preferred way to create new objects in Javascript. It seems a lot more flexible and a lot easier to iterate on than calling new Prototype(arguments). When pulling from localStorage it feels fairly brittle but it works.