course wesbos#10 finished

Author: Jin Xu

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

@@ -104,6 +104,35 @@
   </div>
 
 <script>
+let shiftPressing = 0;
+let prevIdx = [0, 0];
+
+window.addEventListener('keydown', e => {
+  if(e.keyCode === 16) {
+    shiftPressing = 1;
+  }
+});
+window.addEventListener('keyup', e => {
+  if(e.keyCode === 16) {
+    shiftPressing = 0;
+  }
+});
+
+[...document.querySelectorAll('input[type="checkbox"]')].forEach((ele, index) => {
+  ele.addEventListener('change', function (e) { 
+    if(this.checked){
+      prevIdx.shift();
+      prevIdx.push(index);
+    }
+    if(this.checked && shiftPressing) {
+        [...document.querySelectorAll('input[type="checkbox"]')].forEach((el,idx) => {
+          if((idx <= prevIdx[1] && idx >= prevIdx[0]) || (idx >= prevIdx[1] && idx <= prevIdx[0])){
+            el.checked = true;
+          }
+        })
+    }
+   })
+})
 </script>
 </body>
 </html>

readme.md

@@ -13,7 +13,7 @@
 7. [x] ~~Array Cardio, Day 2~~
 8. [x] ~~Fun with HTML5 Canvas~~
 9. [x] ~~Dev Tools Domination~~
-10. [ ] Hold Shift and Check Checkboxes
+10. [x] ~~Hold Shift and Check Checkboxes~~
 11. [ ] Custom Video Player
 12. [ ] Key Sequence Detection
 13. [ ] Slide in on Scroll