Added Clear Form and Check/Uncheck All Buttons to wesbos#15

Author: gbmyt

15 - LocalStorage/index-START.html

@@ -23,10 +23,17 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <div class="buttons">
+      <input type="button" id="clear" value="〄 Clear">
+      <input type="button" id="checkall" value="✔️ Check/Uncheck All">
+    </div>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
+  const clearItems = document.querySelector('#clear');
+  const checkItems = document.querySelector('#checkall');
+
   const itemsList = document.querySelector('.plates');
   const items = JSON.parse(localStorage.getItem('items')) || [];
 
@@ -75,8 +82,26 @@ <h2>LOCAL TAPAS</h2>
     populateList(items, itemsList);
   }
 
+  function handleClear() {
+    var newItems = localStorage.removeItem("items");
+    populateList(newItems, itemsList);
+  }
+
+  function checkAll(e) {
+    for (var item in items) {
+      items[item].done = !items[item].done;
+    }
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items,itemsList);
+  }
+
   // Event Handlers
   addItems.addEventListener('submit', addItem);
+
+  clearItems.addEventListener('click', handleClear);
+
+  checkItems.addEventListener('click', checkAll);
+
   itemsList.addEventListener('click', toggleDone);
 
   populateList(items, itemsList);

15 - LocalStorage/style.css

@@ -49,11 +49,9 @@ h2 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   padding: 10px 0;
   font-weight: 100;
-  display: flex;
 }
 
 .plates label {
-  flex: 1;
   cursor: pointer;
 }
 
@@ -79,3 +77,14 @@ h2 {
   outline: 0;
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
+
+.buttons {
+  margin-top: 1em;
+  /* border: 1px solid red; */
+  display: flex;
+}
+
+.buttons input {
+  flex: 1;
+  margin-left: 0.5em;
+}