finished JS Day wesbos#15

kdipaolo · kdipaolo · commit fb983d349c1a · 2017-04-05T09:04:32.000-04:00
diff --git a/15 - LocalStorage/index-FINISHED.html b/15 - LocalStorage/index-FINISHED.html
@@ -56,6 +56,7 @@ <h2>LOCAL TAPAS</h2>
   }
 
   function toggleDone(e) {
+    console.log(e.target)
     if (!e.target.matches('input')) return; // skip this unless it's an input
     const el = e.target;
     const index = el.dataset.index;
@@ -74,4 +75,3 @@ <h2>LOCAL TAPAS</h2>
 
 </body>
 </html>
-
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
@@ -28,11 +28,43 @@ <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 handleSubmission(e){
+    e.preventDefault();
+    const input = e.target.children[0].value;
+    const item = {input: input, done: false}
+    items.push(item)
+    localStorage.setItem('items', JSON.stringify(items))
+    populateList()
+    this.reset();
+  }
+
+  function populateList(){
+    const newItems = items.map((item, i) => {
+      return `<li>
+        <input type="checkbox" data-index=${i} id="item${i}" ${item.done ? 'checked' : ''} />
+        <label for="item${i}">${item.input}</label>
+      </li>`
+    }).join('')
+    itemsList.innerHTML = newItems;
+  }
+
+  function toggleDone(e) {
+    if (!e.target.matches('input')) return; // skip this unless it's an input
+    const index = e.target.dataset.index
+    items[index].done = !items[index].done;
+    localStorage.setItem('items', JSON.stringify(items))
+  }
+
+
+  populateList()
+
+  addItems.addEventListener('submit', handleSubmission);
+  itemsList.addEventListener('click', toggleDone);
 
 </script>
 
 
 </body>
 </html>
-
