finished Day 15

epikkoder · epikkoder · commit aa0eedb4e4ac · 2019-05-08T13:57:58.000-07:00
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
@@ -28,7 +28,7 @@ <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();
@@ -42,21 +42,36 @@ <h2>LOCAL TAPAS</h2>
 
     items.push(item);
     populateList(items, itemsList);
+    localStorage.setItem("items", JSON.stringify(items));
     this.reset();
   }
 
   function populateList(plates = [], platesList) {
     platesList.innerHTML = plates.map((plate, i) => {
       return `
         <li>
-          <label for="">${plate.text}</label>
+          <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? "checked" : ""} />
+          <label for="item${i}">${plate.text}</label>
         </li>
       `
     }).join("");
   }
 
-  addItems.addEventListener("submit", addItem);
+  function toggleDone(e) {
+    if (!e.target.matches("input"))
+      return;
 
+    const element = e.target;
+    const index = element.dataset.index;
+    items[index].done = !items[index].done;
+    localStorage.setItem("items", JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+  addItems.addEventListener("submit", addItem);
+  itemsList.addEventListener("click", toggleDone);
+  
+  populateList(items, itemsList);
 </script>
 
 
