Added notes and solution for Project 10 - Checking Multiple Checkboxes

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

@@ -99,6 +99,40 @@
   </div>
 
 <script>
+    // get all checkboxes
+    const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
+    // initiate a variable for the last selected/checked checkbox
+    let lastCheckedCheckbox;
+
+    function handleCheck(e) {
+        console.log(e.movementY);
+        // by default, the inBetween flag is set to false
+        let inBetween = false;  
+
+        // if SHIFT key is pressed down && the checkbox was checked
+        if (e.shiftKey && this.checked) {
+            // loop through checkboxes, look for the 1st and last checked i.e. the range
+            // set flag variable, inBetween, as true
+
+            checkboxes.forEach(checkbox => {
+                console.log(checkbox);
+
+                if (checkbox === this || checkbox === lastCheckedCheckbox) {
+                    inBetween = !inBetween;
+                    console.log ('Starting to check the inbetween checkboxes')
+                };
+
+                // 'check' the checkbox if it is within range
+                if (inBetween) { checkbox.checked = true; };
+            })
+        }
+
+        lastCheckedCheckbox = this; // set last checked checkbox
+    }
+
+    // add CLICK event listener to each checkbox element
+    checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
+
 </script>
 </body>
 </html>

readme.md

@@ -601,4 +601,22 @@ The `performance.now()` method returns a `DOMHighResTimeStamp`, measured in mill
 
 `DOMHighResTimeStamp` type is a `double` and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time.
 
+## Project 10: Hold SHIFT to Check Multiple Checkboxes
+
+### [Event Interface](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+
+The `Event` interface represents any event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth).
+
+### [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+
+The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include `click, dblclick, mouseup, mousedown.`
+
+`MouseEvent` properties covered in this project:
+
+* `MouseEvent.shiftKey`: Returns true if the <kbd>shift</kbd> key was down when the mouse event was fired.
+
+Other related properties:
+* `MouseEvent.ctrlKey `: Returns true if the <kbd>control</kbd> key was down when the mouse event was fired.
+* `MouseEvent.clientX`: The X coordinate of the mouse pointer in local (DOM content) coordinates.
+* `MouseEvent.clientY`: The Y coordinate of the mouse pointer in local (DOM content) coordinates.