Merge pull request #1 from alorda/lesson-10

devjona · web-flow · commit 8e7afa4eddfe · 2020-04-24T15:18:31.000-05:00
Lesson 10 Into Master Branch
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
@@ -104,6 +104,74 @@
   </div>
 
 <script>
+  // Let's find the .inbox element with JavaScript and see what it offers us:
+  const inbox = document.querySelector('.inbox');
+  const items = [].slice.call(document.querySelectorAll('.item')); // This returns a node list of all elements with the class of .item
+  console.table(inbox);
+  console.table(items);
+
+  // .inbox is a div with nine children, each of them is a div.item
+  // Let's look at one child, and check it:
+  // inbox.children[2].children[0].checked = true; // this line checks the third checkbox using JavaScript
+  // items.forEach(item => item.children[0].checked = true); // This is how I can check every box with JavaScript. So we have to set a start/stop with this.
+
+  // The logic is, if you click index 2, and then shift+click on another index, write some code that:
+  // 1 - Knows which indeces are checked
+  // 2 - Once you have a start/end, you can use JavaScript to check all the remaining boxes.
+  // 3 - If you check 5, then 2, boxes 2 through 5 should be checked. If you shift+click again on box 7, boxes 2 through 7 should be clicked.
+  // So, the code needs to always look for the lowest checked value, highest checked value, and if you click below or above that, set a new low/high limit for what is checked.
+  // Except, here is an edge case:
+    // You click index 2. 
+    // You click index 7.
+    // You then SHIFT+click index 4
+    // Do you have to SHIFT+click only the second value in the range? Will the 
+
+  // 4 - You also need to find out the SHIFT keycode. 
+  const isShiftPressed = (e => {
+    const checkedList = [];
+    console.info('e.target', e.target);
+    
+    const lastIndexClicked = items.indexOf(e.target.parentNode);
+    console.log(`index of last clicked ${lastIndexClicked}`);
+
+    if (e.shiftKey) {
+      // Find which indeces of the inbox are selected:
+      items.forEach( (item, index) => {
+        console.log('is item checked?', index, item.children[0].checked);
+        console.table(item);
+
+        // Find out which checkboxes are checked
+        if (item.children[0].checked) {
+          console.log('*** ITEM IS CHECKED', index, item.children[0].checked);
+          checkedList.push(index);
+          console.log(`checkedList: ${checkedList}`);
+        }
+      });
+      console.log('typeof:', typeof checkedList);
+      console.log(`checkedList.length: ${checkedList.length}`);
+      
+      
+      let min = checkedList[0];
+      let max = checkedList[checkedList.length - 1];
+      console.log(min, max);
+      
+      const rangeToCheck = items.slice(min, max);
+      // console.log(`rangeToCheck: ${JSON.stringify(rangeToCheck)}`)
+      console.info(rangeToCheck)
+      rangeToCheck.forEach( item => item.children[0].checked = true);
+    }
+    console.log(`checkedList: ${checkedList}`);
+    return checkedList;
+
+  });
+
+  // inbox.addEventListener('click', isShiftPressed);
+  // Add the event listener to each item, instead of to the inbox; the reason is that if I held SHIFT and clicked on a paragraph, and didnt' select a checkbox, and didn't add any "if (checkedList.length < 0 )" logic, it was selecting every single checkbox. This is a more specific approach, otherwise, we can joke about "it's a feature, not a bug".
+  items.forEach(item => {
+    item.addEventListener('click', isShiftPressed);
+  })
+
+
 </script>
 </body>
 </html>
