completes 15

Jason Barnett · Jason Barnett · commit 2dc55e4e37b2 · 2016-12-21T11:32:23.000-08:00
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
@@ -18,6 +18,7 @@
     }
 
     // Regular
+    
 
     // Interpolated
 
diff --git a/15 - LocalStorage/index-FINISHED.html b/15 - LocalStorage/index-FINISHED.html
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
@@ -28,7 +28,46 @@ <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)
+    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){
+    const el = e. target
+    if (!el.matches('input')) return
+    const index = el.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>
 

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`// Regular`
	`21`	`+`
`21`	`22`
`22`	`23`	`// Interpolated`
`23`	`24`