learnFactory internShip-day 42
By: Chukwubuikem Ezeoke
Tags: CSS, Learnfactoryinternship, Debugging, JavaScript, Eureka Stories

learnFactory internShip-day 42

I embarked on a project. This project is a mirror of the task adder/to-do project I completed earlier on, only that this project is wholly done by me.

I embarked on this project in order to test the knowledge I acquired from the initial related projects I did. Coincidentally, a few days later, this project was assigned to all the interns by Mr. Vincent Chibuike of LearnFactory Nigeria.

So, in the course of this project, I got frustrated by bugs, asked my superiors for help, figured out the bugs and came out tops. As about now, I have a very good understanding of local storage and DOM manipulation-the two essential tools used in this project.

A particular bug that took me several days to resolve was this:

const product = document.querySelector('#product').value;

This connotes getting the input value of a particular input tag in the global scope. With this, I used ‘product’ when referring to the input value of the particular input in the local scopes of functions in javascript. This caused a whole lot of anomalies.

Finally, I discovered that it is good practice to do this in 2 steps.

First, saving it to a variable in the global scope:

const product = document.querySelector('#product');

and assessing/getting the value in the local scope of your function.

const product = document.querySelector('#product').value;

Another notable bug which I resolved was a CSS/JavaScript conflict which occurred when I tried to persist the contents of a particular ‘div’.

So in the CSS file, I hid the ‘initially’ empty ‘div’ because it was displaying as a line on the UI. Which wasn’t cool.

display: none;

With the JavaScript persistor function, I added contents to this div from the local storage by looping through it.

//Persisting the ul contents when reloaded function persistor(){ let localArray; //conditional to check if the local storage contains 'product' if(localStorage.getItem('product') == null){ localArray = []; }else { localArray = JSON.parse(localStorage.getItem('product')); } //using forEach to loop through the local storage and display on ui localArray.forEach(function(element){ let pName = document.createElement('p'); pName.appendChild(document.createTextNode(element.productName)); let pPrice = document.createElement('p'); pPrice.appendChild(document.createTextNode(element.productPrice)); let pMethod = document.createElement('p'); pMethod.appendChild(document.createTextNode(element.deliveryMethod)); const cardHold = document.createElement('div'); cardHold.className = 'cardHold'; cardHold.appendChild(pName); cardHold.appendChild(pPrice); cardHold.appendChild(pMethod); container.appendChild(cardHold) }); }

Then I tried persisting -making it remain same when I refresh/reload the page- this ‘div’ by adding its persist function to the DOMContentLoaded event listener.

document.addEventListener('DOMContentLoaded', persistor)

N/B: You can achieve the same result by adding your persist function to the onload event listener in your body tag.

<body id="body" onload="persistor()">

I did not get the expected result. I expected the target UI content to persist when I reload the said page, instead the contents disappears whenever I reload. I was stuck with this bug for days.

Finally, after aeons of debugging, I discovered that the CSS display style I set earlier, conflicted with the JavaScript event listener-when I commented out the CSS display I set earlier-and voila EUREKA!!!

My joy knew no bounds. It was indeed a dramatic eureka moment for me.

Resolving this bug, I realized that the CSS display style initializes whenever I reload thereby overriding the onload/DOMContentLoaded event listener in the JavaScript.

Henceforth, I would always be cautious of my CSS stylings.