12 - Key Sequence Detection

Exercise 12: Key Sequence Detection

Nitish Dayal, Software & Applications Developer - Contact
Last Commit Date: May 12, 2017

We're given an HTML document with...basically nothing. There's a script tag in the document header that loads a JavaScript file from Cornify.com which will inject an image of a unicorn (🦄🦄🦄!) into the DOM and a p element on the bottom of the page if we call cornify_add(). The goal of this challenge is to generate new unicorns every time the user succesfully enters a 'secret code' that we will decide on.

I didn't make this up. Any unicorn-related questions should be directed @Wes Bos.

This one is pretty fun, and a cool little 'easter egg' you could place on your portfolio! I would. And I will.

Guide

NOTE: You guessed it. My solution varies from the official answer key. End result is the same, but I will never stop being lazy. :)

Declare a constant and define it as your secret code in string format. Declare another constant and define it as an empty array. Attach an event listener to the window object that will listen for the 'keyup' event. We'll define the event handler as an arrow function which will accept the event as a parameter. If the key pressed matches a letter in our secret code AND was pressed in the correct order, we'll push the key pressed into our array. If the array of keys pressed matches our secret code, we can log out a message in the console, call on the cornify_add() function, and reset the array to be empty. Done!

Steps:

1. Declare a constant as an emtpy array, and a constant as your secret code:

   const pressedKeys = [], secretCode = 'helloworld'

2. Attach an event listener to the window that will listen for the 'keyup' event, and call upon an arrow function which will accept the event as a parameter:

   window.addEventListener('keyup', (e) => { })

3. In JavaScript, strings are iterable objects, meaning we can do a lot of the same things with a string that we could do with an array. Try logging out the value of your secret code at the index matching the array's length (which should currently be 0). You should get the first character of your secret code. Knowing this, we can check to see if the key property of the event matches our secret code at the current array's length. If it does, we'll push that key value into our array. Otherwise, empty the array:

   /* Inside the body of the arrow function */
   
   // As a ternary operation (can also be done as standard 'if/else' conditional statement)
   secretCode[pressedKeys.length] === e.key ? pressedKeys.push(e.key) : pressedKeys.length = 0;
   
   // If you prefer 'if' statements
   if ( secretCode[pressedKeys.length] === e.key ) {
     pressedKeys.push(e.key)
   } else {
     pressedKeys.length = 0
   }

4. Join the values in the array and compare it with your secret code: if they match, log out a statement, call the cornify_add() function, and clear out the array:

   /* Inside the body of the arrow function */
   
   if (pressedKeys.join('') === secretCode) {
     console.info('Hello you handsome devil!')
     cornify_add()
     pressedKeys.length = 0
   }

5. Wrap your JavaScript logic in an IIFE (immediately invoked function expression) so as to avoid polluting the global namespace:

   (() => {
   /* All of the previously written code goes inside here */
   })(); /* <-- Call the function immediately (hence, immediately invoked function) */

WOOOOOO UNICORNS! This wasn't too bad. Let's do another one. :) And another, and another, and another...