end day wesbos#3

sylvain-farnault · sylvain-farnault · commit ffab903acceb · 2020-04-09T02:00:02.000+02:00
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
@@ -58,44 +58,71 @@
   -->
   <div class="inbox">
     <div class="item">
-      <input type="checkbox">
+      <input type="checkbox" id="01">
       <p>This is an inbox layout.</p>
     </div>
     <div class="item">
-      <input type="checkbox">
+      <input type="checkbox" id="02">
       <p>Check one item</p>
     </div>
     <div class="item">
-      <input type="checkbox">
+      <input type="checkbox" id="03">
       <p>Hold down your Shift key</p>
     </div>
     <div class="item">
-      <input type="checkbox">
+      <input type="checkbox" id="04">
       <p>Check a lower item</p>
     </div>
     <div class="item">
-      <input type="checkbox">
+      <input type="checkbox" id="05">
       <p>Everything in between should also be set to checked</p>
     </div>
     <div class="item">
-      <input type="checkbox">
+      <input type="checkbox" id="06">
       <p>Try to do it without any libraries</p>
     </div>
     <div class="item">
-      <input type="checkbox">
+      <input type="checkbox"  id="07">
       <p>Just regular JavaScript</p>
     </div>
     <div class="item">
-      <input type="checkbox">
+      <input type="checkbox" id="08">
       <p>Good Luck!</p>
     </div>
     <div class="item">
-      <input type="checkbox">
+      <input type="checkbox" id="09">
       <p>Don't forget to tweet your result!</p>
     </div>
   </div>
 
 <script>
+const inputs = document.querySelectorAll("input");
+
+const updateTasks = (event) => {
+  let clickAction = false;
+  let nbChecked = 0;
+
+  if (event.shiftKey && event.target.checked) {
+    // check if odd number of checkeed box
+    inputs.forEach( (input) => {
+      if (input.checked) {
+        nbChecked ++;
+      }
+    });
+    if (nbChecked != 2) return;
+
+    inputs.forEach( (input) => {
+      if (input.checked) {
+        clickAction = !clickAction;
+        return;
+      }
+      if (clickAction) input.click();
+    });
+  }
+}
+
+inputs.forEach( (input) => input.addEventListener("click", updateTasks));
+
 </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
@@ -22,6 +22,6 @@
      </div>
    </div>
 
-  <script src="scripts.js"></script>
+  <script src="scripts-FINISHED.js"></script>
 </body>
 </html>
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
@@ -7,6 +7,24 @@
 </head>
 <body>
 <script>
+  const konami = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
+  let lastKeyTime = new Date();
+  let keysSequence = [];
+  const maxInterval = 1; //max second(s) between 2 keys to valid a complet sequence.
+
+  const getCode = (event) => {
+    console.log(((new Date()) - lastKeyTime) / 1000);
+    if ((((new Date()) - lastKeyTime) / 1000) < maxInterval) {
+      keysSequence.push(event.keyCode);
+      if (keysSequence.join() === konami.join()) alert("You love Konami!");
+    }
+    else keysSequence = [event.keyCode];
+
+    lastKeyTime = new Date();
+    console.log(`keysSequence: ${keysSequence}`);
+  };
+
+  window.addEventListener("keydown", getCode);
 </script>
 </body>
 </html>
