JavaScript 30- Day 15 Study Notes

https://javascript30.com/

Day 15 of JavaScript 30 by Wes Bos involved interactivity with a checkbox and using local storage on the browser. Much of the concepts were familiar to me; using the DOM, working with arrays, and using a toggle function.

I’m getting more familiar with the practice of naming variables at the top of the script tag.

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');

And setting up event listeners at the bottom.

addItems.addEventListener('submit', addItem);
itemsList.addEventListener('click', toggleDone);

Bos used three functions. The first adding the item name submitted into checkbox format. The item was pushed into an array.

function addItem(e){
   e.preventDefault(); //prevents page from automatically reloading when submit done
   const text = (this.querySelector('[name=item]')).value;
// 'this' refers to form tag. name attribute = item
   const item ={
      text,  //ES6 shorthand  text: text,
      done: false
//object containing input from form
   };
  items.push(item);
  populateList(items, itemsList);
  localStorage.setItem('items',JSON.stringify(items));
  this.reset(); //this refers to form element. reset clears form
}

Bos introduced the local storage feature in the browser. Now the items entered into the checkboxes would not disappear when the page refreshed.

The next function added the item name to the inner HTML.

function populateList(plates=[], platesList){
// plate is new variable. generic for item.  plates = [], platesList
   platesList.innerHTML = plates.map((plate, i)=> {
      return `
         <li>
            <input type="checkbox" data-index=${i}  id="item${i}"  ${plate.done ? 'checked' : ''} />
            <label for="item${i}">${plate.text}</label>
        </li>
      `;
   }).join('');
}

As I entered the code for the above function, I made a typo.

id= "items${i}"
// instead of:  id = "item${i}"

Thus began a 3-hour effort to find the bug in my code. How aggravating! I finally had to walk away from the program. The next morning, I once again went through the code, line by line, character by character…and I found the typo.

The third function toggled the checkbox icons.

function toggleDone(e) {
   if (!e.target.matches('input')) return;//skip if not input
   const el = e.target;
   const index = el.dataset.index;
   items[index].done = !items[index].done;
   localStorage.setItem('items',JSON.stringify(items));
   populateList(items, itemsList);
}

If it were not for my typo, I found this lesson straightforward and useful. I will definitely use what I learned in later projects.

Follow my study notes as I progress through JavaScript 30.

JavaScript 30- Day 13 Study Notes

JavaScript 30–01 Drum Kit