Finished wesbos#15

Author: smchenrybc

15 - LocalStorage/index-START.html

@@ -28,7 +28,61 @@ <h2>LOCAL TAPAS</h2>
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const items = JSON.parse(localStorage.getItem('items')) || [];
+
+  function addItem(e) {
+    e.preventDefault();
+
+    const text = (this.querySelector('[name="item"]')).value;
+
+    const item = {
+      text,
+      done: false
+    };
+
+    items.push(item);
+    populateList(items, itemsList);
+
+    // save items to local storage, but use 'stringify'
+    // first bc local storage API only accepts strings
+    localStorage.setItem('items', JSON.stringify(items));
+
+    this.reset();
+  }
+
+  function populateList(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('');
+  }
+
+  function toggleDone(e) {
+    // only perform action on checkboxes
+    if (!e.target.matches('input')) {
+      return;
+    }
+
+    const el = e.target;
+    const index = el.dataset.index;
+
+    items[index].done = !items[index].done;
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+
+    console.log(el.dataset.index);
+  }
+
+  addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('click', toggleDone);
+
+  populateList(items, itemsList);
+
+  // const checkboxes = document.querySelectorAll('.checkbox');
+  // checkboxes.forEach(input => input.addEventListener('click', () => alert('Hi guys!')));
+
 
 </script>