In-Browser Persistence Using Vanilla JavaScript: How I Completed Flatiron’s First Independent Project
Part 1: The Extended Executive Summary
What Did I Do:
I used the data set property of the body element in the HTML file to store data of interest to the user from a public API. In this case, the API serves subsets of a large collection of inspirational quotes. The user signals that they are interested in a particular quote by rating it. This rating can be updated by the user because the program stores the quote’s data by unique IDs that are created by the program.
At any time after the user rates a quote or quotes, they can decide to show their ratings in a favorites table, where the quotes are displayed in descending order of each of their ratings, from most favorite to least favorite.
In this table, the user can continue to update and re-order ratings of their selected quotes, or they can un-rate a quote entirely and remove it from the favorites table. This is accomplished by using the “className” property of an unseen “data div” element set up in the HTML file. For this property, another “classList” property exists that has methods on it where classes can be added or removed. So, whenever a user rates a quote, that quote ID is added as a class to that data div (allowing all of the rated quotes to be grabbed by the program to be sorted and shown in the table). If the user un-rates a quote, the remove method of that classList property is called that removes that quote’s ID as a class from the data div (thus the quote will be removed from the table upon subsequent refreshing or re-ordering of the table).
The Major Problems I Faced and Their Solutions:
The first major problem I faced was in eliminating enough features from my MVP (minimum viable product) in order to show it to my instructors and to have enough time afterward to implement a unique app feature that would “delight the customer”. I got around this by remembering to stay customer-focused. After all, I couldn’t get feedback from my customer (my instructors) until I submitted my MVP to them. I also had to do it early enough so that I had time to add new and desirable features to it.
The second major problem I faced was that some quotes would display from the server, but others wouldn’t. I examined the error messages and the server data to track down the source of this problem to the fact that the server used hyphens in the names of its quote IDs, and this was giving the web page difficulty in assigning these IDs as sub-properties to the dataset property of the document body. When I re-programmed the app to generate new unique IDs without hyphens, the problem disappeared.
