Konami Code Lab


  1. Practice using event listeners.
  2. Explain how event listeners are triggered.
  3. Capture user interactions to trigger events on a page.


In konami_code.js, you'll notice that we've provided very little: well, nothing except -- what's that? If you open the file up in your text editor, you should see:

const codes = [

function init() {
  // your code here

But what could those keycodes be? They're the famous Konami Code, as JavaScript KeyboardEvent keys. It's become a common Easter egg for sites to have hidden features behind this code, and now it's your turn to implement it!

In index.html, you'll see that we're loading the file in for you:

<script src="konami_code.js"></script>

This is JavaScript's way of pulling in code from outside the page. Here, we've given the <script> tag a local source (the file that's right here in the directory), but we could also supply a URL to load an external resource (more on that in a bit).

You'll want to attach an event listener to document.body and check for 'keydown' events, as shown in the example above. If the user enters this special code, pressing all ten of the keys in the correct order, alert() a congratulatory message. However, if they press a key out of sequence or a key that isn't part of the Konami code, don't alert() anything and simply keep listening for all ten keydowns in the correct order.

function init() {

  // Attaching an keydown event listener to document.body
  document.body.addEventListener("keydown", (event) => {
    // Now, how can we check for which specific key was pressed?

When you're testing the code out in the browser, be sure to call init() to attach the event listener and set everything up!

Stuck on how to get started? Here's a contrived, short example:

// Keys for A, B, and C keys.
const alphabet = ['a', 'b', 'c'];

// Keep track of index outside of the event handler.
let index = 0;

// This is the function that would be invoked by the event listener.
function onKeyDownHandler(e) {
  const key = e.key;

  if (key === alphabet[index]) {

    if (index === alphabet.length) {

      index = 0;
  } else {
    index = 0;

Have fun!

Note: Once you have the tests passing you still may not see the alert pop up if you try to test your code in the browser. This is because the test 'intercepts' the alert. To see it work in the browser, temporarily comment out all the code in the indexTest.js file except the line where init() is called.


KeyboardEvent has gotten lots of recent updates. The key and code properties recently replaced which, keyCode, and charCode properties, which were often implemented slightly differently between different browsers and would report different values across different operating systems. Some environments (node in particular) don't know about KeyboardEvent

If you are working on this lab using the in-browser IDE, you can see your progress in browser by using httpserver and navigating to the provided IP. You will need to close out of httpserver and run learn to test your solution.


View Konami Code Lab on Learn.co and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us