created functions to add, populate, and toggle

wesbos · shb1383 · May 16, 2024 · May 16, 2024 · May 20, 2024 · May 21, 2024
commit edbcfb46c7e551d83c9b17e9481170e4a8b2c585
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
@@ -26,14 +26,52 @@ <h2>LOCAL TAPAS</h2>
     </form>
   </div>
 
-<script>
-  const addItems = document.querySelector('.add-items');
-  const itemsList = document.querySelector('.plates');
-  const items = [];
+  <script>
+    const addItems = document.querySelector('.add-items');
+    const itemsList = document.querySelector('.plates');
+    const items = JSON.parse(localStorage.getItem('items')) || [];
 
-</script>
+    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) {
+      if (!e.target.matches('input')) return; // skip this unless it's an input
+      const el = e.target;
+      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>
 
 
 </body>
 </html>
-