tutorial 10 completed

Author: mochibot

10 - Hold Shift and Check Checkboxes/README.md

@@ -0,0 +1,4 @@
+Things learned:
+- use flag to keep track of checked status
+
+I did it differently by finding the index of the first and second checked items, then used forEach to change everything in between to checked.

10 - Hold Shift and Check Checkboxes/index-START.html

@@ -96,6 +96,36 @@
   </div>
 
 <script>
+  let checkboxes = document.querySelectorAll('.item input');
+  let arr = Array.from(checkboxes);
+
+  let lastChecked, first, last;
+
+  function handleCheck(event) {
+    first = arr.indexOf(lastChecked)
+    if (event.shiftKey && this.checked) {
+      last = arr.indexOf(this);
+    }
+    arr.slice(first, last + 1).forEach(item => item.checked = true);
+
+    lastChecked = this;
+    /*
+    let inBetween = false;
+    if (event.shiftKey && this.checked) {
+      checkboxes.forEach(item => {
+        if(item === this || item === lastChecked) {
+          inBetween = !inBetween;
+        }
+        if(inBetween) {
+          item.checked = true;
+        }
+      })
+    }
+    */
+  }
+
+  checkboxes.forEach(item => item.addEventListener('click', handleCheck))
+  
 </script>
 </body>
 </html>