https://github.com/gerhynes/key-sequence-detection
A page made to practice working with key sequence detection. Built for Wes Bos' JavaScript 30 course.
https://github.com/gerhynes/key-sequence-detection
javascript javascript30
Last synced: about 1 year ago
JSON representation
A page made to practice working with key sequence detection. Built for Wes Bos' JavaScript 30 course.
- Host: GitHub
- URL: https://github.com/gerhynes/key-sequence-detection
- Owner: gerhynes
- Created: 2017-10-09T19:13:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-14T19:31:27.000Z (over 8 years ago)
- Last Synced: 2025-06-12T22:36:36.319Z (about 1 year ago)
- Topics: javascript, javascript30
- Language: HTML
- Homepage: https://gk-hynes.github.io/key-sequence-detection/
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Key Sequence Detection](https://gk-hynes.github.io/key-sequence-detection/)
A page made to practice working with key sequence detection, in this case the Konami code. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.
[](https://gk-hynes.github.io/key-sequence-detection/)
## Notes
Create an empty array, `pressed`.
Create a secret code, here the Konami code.
Listen for the keyup event on the window. Log `e.key` to record the key that was pressed.
Whenever someone presses a key push its value into the `pressed` array.
Splice the array elements, starting from the end, and only take the amount needed to trigger the secret code.
```js
pressed.splice(-secretCode.length, pressed.length - secretCode.length);
```
Turn the array into a string and check if it includes the secret code.
At this stage run something fun, for example cornify.js to add unicorns and rainbows.
```js
if (pressed.join("").includes(secretCode)) {
console.log("DING DING!");
cornify_add();
}
```
### Personal refactor
Since cornify.js does not use https you may run into problems.
One alternative is to show a gif when the secret code is entered.
Here the logo, keycode and (initially hidden) gif are selected. Then a function, `replaceLogo`, is run. This function adds classes of hidden to the standard logo and keycode and active to the secret gif, which sets the standard logo and keycode to `display: none;` and the secret gif to `display: block;`