day 12

pouyio · pouyio · commit b77e284f26bb · 2016-12-24T13:38:25.000+01:00
diff --git a/12-key-sequence-detection/README.md b/12-key-sequence-detection/README.md
@@ -0,0 +1,2 @@
+# Key sequence detection
+Watch this challenge live in [codepen](http://codepen.io/pouyio/full/vywmwQ/).
diff --git a/12-key-sequence-detection/index.html b/12-key-sequence-detection/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Key sequence detection</title>
+    <style media="screen">
+      body{
+        font-family: sans-serif;
+        font-size: 1.8em;
+        color: #383838;
+        min-height: 100vh;
+        padding: 1em;
+        box-sizing: border-box;
+        background-color: #e7e4e4;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        max-width: 400px;
+        margin: 0 auto;
+      }
+      .right {
+        font-size: .8rem;
+        align-self: flex-end;
+      }
+    </style>
+  </head>
+  <body>
+    <p>
+      Type the secret code
+    </p>
+    <p class="right">
+      it's pilila
+    </p>
+    <script type="text/javascript">
+      const pressed = [];
+      const secretCode = 'pilila';
+
+      window.addEventListener('keyup', e => {
+        pressed.push(e.key);
+        pressed.splice(-secretCode.length -1, pressed.length - secretCode.length);
+        if(pressed.join('').includes(secretCode)) {
+          alert('Secret code found!');
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ My goal is simply to learn the basics by doing many simple things rather than st
 9. [x] [Dev Tools Domination](./09-must-know-dev-tool-tips) - [Codepen](http://codepen.io/pouyio/pen/BQbbdp?editors=1111#)
 10. [x] [Hold Shift and Check Checkboxes](./10-hold-shift-and-check-checkboxes) - [Codepen](http://codepen.io/pouyio/full/RoOyqj/)
 11. [x] [Custom Video Player](./11-custom-html5-video-player) - [Codepend](http://codepen.io/pouyio/full/bByVLB/)
-12. [ ] Key Sequence Detection
+12. [x] [Key Sequence Detection]()- [Codepen](http://codepen.io/pouyio/full/vywmwQ/)
 13. [ ] Slide in on Scroll
 14. [ ] JavaScript References vs. Copying
 15. [ ] LocalStorage

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# Key sequence detection`
	`2`	`+Watch this challenge live in [codepen](http://codepen.io/pouyio/full/vywmwQ/).`