Add Check All and Clear All functionality

dianafisher · dianafisher · commit 090c418711b6 · 2017-01-02T13:58:16.000-08:00
diff --git a/15 - LocalStorage/index.html b/15 - LocalStorage/index.html
@@ -21,15 +21,21 @@ <h2>LOCAL TAPAS</h2>
     </ul>
     <form class="add-items">
       <input type="text" name="item" placeholder="Item Name" required>
-      <input type="submit" value="+ Add Item">
-    </form>
+      <input type="submit" value="+ Add Item">            
+    </form>    
+    <p class="all-items">
+        <input type="submit" value="Check All">
+        <input type="submit" value="Clear All">
+    </p>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
   const items = JSON.parse(localStorage.getItem('items')) || [];
 
+  const allItems = document.querySelector('.all-items');
+
   function addItem(e) {
     // prevent the page from reloading (which is the default action)
     e.preventDefault();
@@ -69,10 +75,10 @@ <h2>LOCAL TAPAS</h2>
 
   function toggleDone(e) {    
     // fall out if the target is not an input
-    if (!e.target.matches('input')) return;
+    if (!e.target.matches('input')) return;  // Element.matches()
     console.log(e.target);
 
-    // loop through our items array and find the one which has been checked.
+    // find the item which has been checked.
     const el = e.target;
     console.log(el.dataset.index);
     const index = el.dataset.index;
@@ -84,12 +90,37 @@ <h2>LOCAL TAPAS</h2>
     populateList(itemsList, items);
   }
 
+  function toggleAllItems(e) {    
+
+    const el = e.target;    
+
+    if (el.value.match('Check All')) {
+      // loop through items array and check all that need to be checked.
+      items.forEach(function(item) {
+        // console.log(item);
+        item.done = true;
+      });
+    } else {
+      items.forEach(function(item) {
+        // console.log(item);
+        item.done = false;
+      });
+    }
+    
+    // update local storage
+    localStorage.setItem('items', JSON.stringify(items));
+    // update the HTML
+    populateList(itemsList, items);
+  }
+
   // listen for the submit event to cover all bases.
   addItems.addEventListener('submit', addItem);
 
   // listen for a click on the items list.  Via event delegation, have the items list pass the event on to it's children.
   itemsList.addEventListener('click', toggleDone);
 
+  allItems.addEventListener('click', toggleAllItems);
+
   // load from local storage..
   populateList(itemsList, items);
 
diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
@@ -76,3 +76,13 @@
       outline:0;
       border:1px solid rgba(0,0,0,0.1);
     }
+
+    .all-items {
+      margin-top: 20px;      
+    }
+
+    .all-items input {
+      padding:10px;
+      outline:0;
+      border: 1px solid rgba(0,0,0,0.1);
+    }
