day 10

pouyio · pouyio · commit 26590d9c8032 · 2016-12-22T18:53:17.000+01:00
diff --git a/10-hold-shift-and-check-checkboxes/README.md b/10-hold-shift-and-check-checkboxes/README.md
@@ -0,0 +1,2 @@
+# Hold shift and checkboxes
+Watch this challenge live in [codepen]().
diff --git a/10-hold-shift-and-check-checkboxes/app.js b/10-hold-shift-and-check-checkboxes/app.js
@@ -0,0 +1,27 @@
+/*jshint esversion: 6 */
+
+(function() {
+
+  const checkboxes = document.querySelectorAll('input');
+  checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleClick));
+  let lastChecked;
+
+  function handleClick(e) {
+    let inBetween = false;
+    if(e.shiftKey && this.checked) {
+
+      checkboxes.forEach(checkbox => {
+        if(this === checkbox || checkbox === lastChecked) {
+          inBetween = !inBetween;
+        }
+
+        if(inBetween) {
+          checkbox.checked = true;
+        }
+      });
+    }
+
+    lastChecked = this;
+  }
+
+})();
diff --git a/10-hold-shift-and-check-checkboxes/index.html b/10-hold-shift-and-check-checkboxes/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Hold shift and checkboxes</title>
+    <link rel="stylesheet" href="style.css" media="screen" title="no title">
+  </head>
+  <body>
+    <ul class="list">
+      <li><input type="checkbox"><label>Task 1</label></li>
+      <li><input type="checkbox"><label>Task 2</label></li>
+      <li><input type="checkbox"><label>Task 3</label></li>
+      <li><input type="checkbox"><label>Task 4</label></li>
+      <li><input type="checkbox"><label>Task 5</label></li>
+      <li><input type="checkbox"><label>Task 6</label></li>
+      <li><input type="checkbox"><label>Task 7</label></li>
+      <li><input type="checkbox"><label>Task 8</label></li>
+    </ul>
+
+    <script type="text/javascript" src="app.js"></script>
+  </body>
+</html>
diff --git a/10-hold-shift-and-check-checkboxes/style.css b/10-hold-shift-and-check-checkboxes/style.css
@@ -0,0 +1,33 @@
+body{
+  font-family: sans-serif;
+  font-size: 1.2em;
+  color: #383838;
+  background-color: #e7e4e4;
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.list {
+  list-style: none;
+  padding-left: 0;
+}
+
+li {
+  margin: .8em;
+  width: 15em;
+}
+
+input[type=checkbox] {
+  margin: 1em;
+}
+input[type=checkbox]:checked + label {
+  text-decoration: line-through;
+}
+
+label {
+  margin: 1em;
+
+}
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ My goal is simply to learn the basics by doing many simple things rather than st
 7. [x] [Array Cardio II](./07-array-cardio-ii) - [Codepen](http://codepen.io/pouyio/pen/eBxVPr?editors=1111)
 8. [x] [Fun with HTML5 Canvas](./08-fun-with-HTML5-canvas) - [Codepen](http://codepen.io/pouyio/full/xRBqNL/)
 9. [x] [Dev Tools Domination](./09-must-know-dev-tool-tips) - [Codepen](http://codepen.io/pouyio/pen/BQbbdp?editors=1111#)
-10. [ ] Hold Shift and Check Checkboxes
+10. [x] [Hold Shift and Check Checkboxes](./10-hold-shift-and-checkboxes) - [Codepen]()
 11. [ ] Custom Video Player
 12. [ ] Key Sequence Detection
 13. [ ] Slide in on Scroll

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# Hold shift and checkboxes`
	`2`	`+Watch this challenge live in [codepen]().`