Update index-FINISHED.html

Author: erikwallace

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

@@ -103,35 +103,43 @@
     </div>
   </div>
 
-<script>
-const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
-
-let lastChecked;
-
-function handleCheck(e) {
-  // Check if they had the shift key down
-  // AND check that they are checking it
-  let inBetween = false;
-  if (e.shiftKey && this.checked) {
-    // go ahead and do what we please
-    // loop over every single checkbox
-    checkboxes.forEach(checkbox => {
-      console.log(checkbox);
-      if (checkbox === this || checkbox === lastChecked) {
-        inBetween = !inBetween;
-        console.log('STarting to check them inbetween!');
-      }
+  <script>
+    const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
+
+    let lastChecked; // track what was the last checked checkbox
+
+    function handleCheck(e) {
+      // console.log(e);
+      let inBetween = false;
+      if (e.shiftKey && this.checked) {
+        // if the shift key is down and a checkbox is checked (not unchecked) do this:
+        // loop over every checkbox
+        checkboxes.forEach(checkbox => {
+          console.log(checkbox);
+
+          // is the checkbox equal to this or last checked?
+          if (checkbox === this || checkbox === lastChecked) {
+            inBetween = !inBetween;
+            console.log('Start checking boxes in between...')
+          }
+
+          // target checkboxes between the first and last checked
+          if (inBetween) {
+            checkbox.checked = true;
+          }
+
+        })
 
-      if (inBetween) {
-        checkbox.checked = true;
       }
-    });
-  }
 
-  lastChecked = this;
-}
+      lastChecked = this;
+
+    }
+
+    // Loop through getting all checkboxes with a class of .checkbox
+    // Listen for checkboxes to be clicked
+    checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
+  </script>
 
-checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
-</script>
 </body>
 </html>