Skip to content

Commit df2b099

Browse files
committed
challenge 12 complete + readme initiated
Pushing to github to complete readme due to formatting.
1 parent bbca848 commit df2b099

4 files changed

Lines changed: 54 additions & 30 deletions

File tree

‎exercises/11 - Custom Video Player/scripts.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,7 @@
2626
progress.addEventListener('mouseup', () => mousedown = false)
2727

2828
skipButtons.forEach(button => {
29-
button.addEventListener(
30-
'click', () => video.currentTime += parseFloat(button.dataset.skip))
29+
button.addEventListener('click', () => video.currentTime += parseFloat(button.dataset.skip))
3130
})
3231

3332
ranges.forEach(range => {
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Exercise 12: Key Sequence Detection
2+
Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)
3+
Last Commit Date: Dec 18, 2016
4+
5+
We're given an HTML document with...basically nothing. There's a `script` tag in the
6+
document header that loads a JavaScript file from [Cornify.com](https://www.cornify.com)
7+
which will inject an image of a unicorn (🦄🦄🦄!) into the DOM and a `p` element
8+
on the bottom of the page if we call `cornify_add()`. The goal of this challenge
9+
is to generate new unicorns every time the user succesfully enters a 'secret code'
10+
that we will decide on.
11+
12+
I didn't make this up. Any unicorn-related questions should be directed @[Wes Bos](https://github.com/wesbos).
13+
14+
This one is pretty fun, and a cool little 'easter egg' you could place on your portfolio!
15+
I would. And I will.
16+
17+
## Guide
18+
19+
**NOTE:** You guessed it. My solution varies from the official answer key. End result
20+
is the same, but I will never stop being lazy. :)
21+
22+
Declare a `constant` and define it as your secret code _in string format_. Declare
23+
another `constant` and define it as _an empty array_. Attach an _event listener_
24+
to the _window object_ that will listen for the 'keyup' event. We'll define
25+
the _event handler_ as an **arrow function** which will accept the `event` as
26+
a parameter. If the key pressed matches a letter in our secret code **AND**
27+
was pressed in the correct order, we'll **push** the key pressed into our
28+
array. If the _array of keys pressed_ matches our secret code, we can
29+
log out a message in the console, call on the `cornify_add()` function,
30+
and reset the array to be empty. Done!

‎exercises/12 - Key Sequence Detection/index-FINISHED.html‎

Lines changed: 0 additions & 25 deletions
This file was deleted.
Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,32 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Key Detection</title>
67
<script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
78
</head>
9+
810
<body>
9-
<script>
10-
</script>
11+
<script>
12+
(() => {
13+
const pressedKeys = [], secretCode = 'helloworld'
14+
15+
window.addEventListener('keyup', (e) => {
16+
17+
secretCode[pressedKeys.length] === e.key ?
18+
pressedKeys.push(e.key) : pressedKeys.length = 0
19+
20+
if (pressedKeys.join('') === secretCode) {
21+
console.info('Hello you handsome devil!')
22+
cornify_add()
23+
pressedKeys.length = 0
24+
}
25+
26+
})
27+
})();
28+
29+
</script>
1130
</body>
12-
</html>
31+
32+
</html>

0 commit comments

Comments
 (0)