fixed inBetween & lastChecked bugs 🐞+ improved UX

1. user clicks shift before first selection, all checkboxes below are selected. - lastChecked is undefined and inBetween remains true.

2. user selects and deselects a checkbox and then holds shift before selecting a checkbox, all checkboxes between current and last are selected. - lastChecked remains defined though it has been deselected.

Improved UX by checking direction when checkboxes get deselected.

Author: marcoSven

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

@@ -30,7 +30,6 @@
       border-bottom: 0;
     }
 
-
     input:checked + p {
       background: #F9F9F9;
       text-decoration: line-through;
@@ -45,7 +44,7 @@
       padding: 20px;
       transition: background 0.2s;
       flex: 1;
-      font-family: 'helvetica neue';
+      font-family:'helvetica neue';
       font-size: 20px;
       font-weight: 200;
       border-left: 1px solid #D1E2FF;
@@ -54,7 +53,7 @@
    <!--
    The following is a common layout you would see in an email client.
 
-   When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes in-between those two checkboxes should be checked.
+   When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
 
   -->
   <div class="inbox">
@@ -80,7 +79,7 @@
     </div>
     <div class="item">
       <input type="checkbox">
-      <p>Try do it without any libraries</p>
+      <p>Try to do it without any libraries</p>
     </div>
     <div class="item">
       <input type="checkbox">
@@ -97,34 +96,68 @@
   </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 in between!');
-      }
-
-      if (inBetween) {
-        checkbox.checked = true;
-      }
-    });
+  class listSelect {
+    constructor () {
+      this.checkboxes = document.querySelectorAll('input[type="checkbox"]');
+      this.proto = Array.prototype;
+      this.lastIndex;
+    }
+
+    findIndex = node => this.proto.findIndex.call(this.checkboxes, box => node === box )
+
+    firstLast ( node, currentIndex ) {
+      const indexArr = this.proto.reduce.call(this.checkboxes, (arr, box) => {
+          if( box.checked ){
+            arr.push( this.findIndex(box) );
+          }
+          return arr;
+        }, []),
+        firstLastArr = ( (arr, unchecked, current) => {
+            if ( ! unchecked ) {
+              return arr;
+            }
+            arr[0] = current > arr[0] && current > this.lastIndex ? current +1 : arr[0];
+            arr[1] = current < arr[1] && current < this.lastIndex ? current -1 : arr[1];
+
+            return arr;
+        })([indexArr[0], indexArr[indexArr.length -1]], false == node.checked, currentIndex);
+
+      return firstLastArr;
+
+    }
+
+    update (node, currentIndex) {
+      const firstLast = this.firstLast(node, currentIndex);
+
+      this.checkboxes.forEach( (box, index) => {
+        if( index >= firstLast[0] && index <= firstLast[1]  ) {
+          box.checked = true;
+        } else {
+          box.checked = false;
+        }
+      })
+
+    }
+
+  }
+
+
+  const lS = new listSelect();
+  function change(e) {
+    const currentIndex = lS.findIndex(this);
+
+    if ( ! e.shiftKey ) {
+      return;
+    }
+
+    lS.update(this, currentIndex);
+
+    lS.lastIndex = currentIndex;
+
   }
 
-  lastChecked = this;
-}
+  lS.checkboxes.forEach( box => box.addEventListener('click', change ) )
 
-checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
 </script>
 </body>
 </html>