Tapas local storage

Creating a to do list that makes use of local storage to update the added items, along with checked state of input fields.

First we want to create a function that allows use to get the user input and store into an object.

    function addItems(e) {
    e.preventDefault();
    const text = this.querySelector('input[name=item]').value;

    const item = {
    text,
    done: false
  }

  items.push(item);

  populateList(items, plates);

  localStorage.setItem('items', JSON.stringify(items));
  form.reset();
}

The above code makes use of this querySelector as the function will be attached to the form, were the correct this is referenced.

We can set the item object text to the value of the user input (which will be on submit). For ease of access outside of the function, and to be able to use local storage, we store the list items in array as objects. Below is a populate function, which generates the html. Local storage is used to set the items. Form reset is used to clear the input field.

We can see where the local storage is set with the below code, from the user input that is passed into the items array using this code:

     const items = JSON.parse(localStorage.getItem('items')) || [];

Here is the populateList function explain ( creates html from user input )

   function populateList(plate = [], plateItems) {

  plateItems.innerHTML = plate.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('');
}

The function takes an array and a second argument used to select the class where the html will be placed. Using the class argument (plateItems) we set the innerHTML to the items array of objects, using map we can pull the information out. And return using back ticks.

   ${plate.done ? 'checked' : ''}

If plate done is true, the item will display a check mark. Else no check - being the information set in the item object.

Finally join is used the convert the details to strings.

   function toggleChecked(e) {
    if(!e.target.matches('input')) return; // skip this unless it's an input
  const el = e.target;
  // get the index of clicked item
  const index = el.dataset.index;
  // toggle done if false true, if true false
  items[index].done = !items[index].done;

  // store the toggle true or false
  localStorage.setItem('items', JSON.stringify(items));
  // update the page with items

  populateList(items, plates);

}

The function above checks to see if an input is clicked, if so continue. The index is stored added from the map, this allows us to keep track on which item is clicked. A toggle is used: items[index].done = !items[index].done; If not checked on click, turn to check, if checked un check. This is then stored in local storage. And the populate items function display the updated html.

  function removeAll() {
  window.localStorage.clear();
  window.location.reload(true);
}

We can remove all items, and clear the storage, by using the above. The page is reloaded to to ensure clear.

    function checks(show) {
for(var i = 0; i < items.length; i ++) {
items[i].done = show;
  }
   localStorage.setItem('items', JSON.stringify(items));
  // update the page with items
   populateList(items, plates);
}

Lets check or uncheck the list items. Using a function to add true to check all button and false to un check all. We can loop through each item and change the checked state. The items are then stored, and the populateList function updates the page.

Things learnt

  1. localStorage set item
  2. localStorage get item
  3. Storing using input as objects
  4. Pushing objects to arrays
  5. Creating html through using map method on object
  6. SVG emoji
  7. Checking / unchecking check boxes with function

Completed project

See the Pen Tapas local storage list by Harry Beckwith (@fun) on CodePen.


262 0 0