Finished 10

jdlawrence · jdlawrence · commit 9c7b7b5427bd · 2017-07-27T14:57:13.000-07:00
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
@@ -1,51 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Hold Shift to Check Multiple Checkboxes</title>
 </head>
+
 <body>
   <style>
-
     html {
       font-family: sans-serif;
-      background:#ffc600;
+      background: #ffc600;
     }
 
     .inbox {
-      max-width:400px;
-      margin:50px auto;
-      background:white;
-      border-radius:5px;
-      box-shadow:10px 10px 0 rgba(0,0,0,0.1);
+      max-width: 400px;
+      margin: 50px auto;
+      background: white;
+      border-radius: 5px;
+      box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
     }
 
     .item {
-      display:flex;
-      align-items:center;
+      display: flex;
+      align-items: center;
       border-bottom: 1px solid #F1F1F1;
     }
 
     .item:last-child {
-      border-bottom:0;
+      border-bottom: 0;
     }
 
 
-    input:checked + p {
-      background:#F9F9F9;
+    input:checked+p {
+      background: #F9F9F9;
       text-decoration: line-through;
     }
 
     input[type="checkbox"] {
-      margin:20px;
+      margin: 20px;
     }
 
     p {
-      margin:0;
-      padding:20px;
-      transition:background 0.2s;
-      flex:1;
-      font-family:'helvetica neue';
+      margin: 0;
+      padding: 20px;
+      transition: background 0.2s;
+      flex: 1;
+      font-family: 'helvetica neue';
       font-size: 20px;
       font-weight: 200;
       border-left: 1px solid #D1E2FF;
@@ -55,10 +56,8 @@
       text-align: center;
       font-size: 15px;
     }
-
-
   </style>
-   <!--
+  <!--
    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 inbetween those two checkboxes should be checked.
@@ -103,7 +102,36 @@
     </div>
   </div>
 
-<script>
-</script>
+  <script>
+    var items = document.querySelectorAll("input");
+    var checkboxes = document.getElementsByTagName("input");
+    console.log('checkboxes', checkboxes, checkboxes[3].checked);
+    var lastChecked = null;
+    for (var i = 0; i < checkboxes.length; i++) {
+      checkboxes[i].onclick = doSomething;
+      checkboxes[i].index = i;
+    };
+    function doSomething(e) {
+      var index = this.index;
+      if (e.shiftKey && this.checked) {
+        console.log('ere')
+        if (lastChecked !== null) {
+          // if lastChecked less than index, iterate up
+          console.log('ereasdfd')
+          if (lastChecked < index) {
+            for (var i = lastChecked + 1; i < index; i++) {
+              checkboxes[i].checked = true;
+            }
+          } else {
+            for (i = lastChecked - 1; i > index; i--) {
+              checkboxes[i].checked = true;
+            }
+          }
+        }
+      }
+      lastChecked = index;
+    };
+  </script>
 </body>
-</html>
+
+</html>
