Day15 optional tasks

simonpioli · simonpioli · commit fe71cc197175 · 2019-09-09T11:52:10.000+01:00
diff --git a/15 - LocalStorage/index.html b/15 - LocalStorage/index.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>
+    <p class="buttons">
+        <button class="clear">Clear List</button>
+        <button class="all-checks" data-checked="1">Check All</button>
+        <button class="all-checks" data-checked="">Uncheck All</button>
+    </p>
 </div>
 
 <script>
     const addItems = document.querySelector('.add-items');
+    const clearItems = document.querySelector('.clear');
+    const checkButtons = document.querySelectorAll('.all-checks');
     const itemsList = document.querySelector('.plates');
     const items = JSON.parse(localStorage.getItem('items')) || [];
 
@@ -46,6 +53,10 @@ <h2>LOCAL TAPAS</h2>
     }
 
     function populateList(plates = [], platesList) {
+        if (plates.length === 0) {
+            platesList.innerHTML = '<li>Loading Tapas...</li>';
+            return;
+        }
         platesList.innerHTML = plates.map((plate, i) => {
             return `
                 <li>
@@ -56,19 +67,50 @@ <h2>LOCAL TAPAS</h2>
         }).join('');
     }
 
-    function toggleDone(e) {
+    function handleSingleCheckbox(e) {
         if (!e.target.matches('input')) {
             return;
         }
         const el = e.target;
         const itemIndex = el.dataset.index;
+        toggleDone(itemIndex);
+    }
+
+    function handleAllCheckboxes(e) {
+        const checked = Boolean(e.target.dataset.checked);
+        const checkboxes = itemsList.querySelectorAll('input[type="checkbox"]');
+        checkboxes.forEach(checkbox => {
+            const itemIndex = checkbox.dataset.index;
+            if (checked) {
+                checkbox.setAttribute('checked', '');
+                items[itemIndex].done = true;
+            } else {
+                checkbox.removeAttribute('checked');
+                items[itemIndex].done = false;
+            }
+            localStorage.setItem('items', JSON.stringify(items));
+        });
+    }
+
+    function toggleDone(itemIndex) {
         items[itemIndex].done = !items[itemIndex].done;
         populateList(items, itemsList);
         localStorage.setItem('items', JSON.stringify(items));
     }
 
+    function clearList() {
+        items.splice(0, items.length);
+        populateList(items, itemsList);
+        localStorage.setItem('items', JSON.stringify(items));
+    }
+
     addItems.addEventListener('submit', addItem);
-    itemsList.addEventListener('click', toggleDone);
+    clearItems.addEventListener('click', clearList);
+    checkButtons.forEach(button => {
+        button.addEventListener('click', handleAllCheckboxes);
+    });
+    itemsList.addEventListener('click', handleSingleCheckbox);
+
     populateList(items, itemsList);
 
 </script>
