JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<div>
     <h1>Press an arrow key or the spacebar</h1>

</div>

CSS

body {
    background: #222;
    color: white;
    margin: 0;
    padding: 0;
}
div {
    width: 100%;
    height: 100%;
    background: #222;
    position: absolute;
}
h1 {
    top: 45%;
    text-align: center;
    position: absolute;
    width: 100%;
}

JavaScript

var div = document.getElementsByTagName('div')[0],
    h1 = div.getElementsByTagName('h1')[0];


window.addEventListener("keydown", function (e) {
    var newKp = 'key' + e.keyCode;
    key = {
        'key38': function () {
            h1.innerHTML = 'Up Above';
            div.style.backgroundColor = 'crimson';
        },
            'key40': function () {
            h1.innerHTML = 'Down Below';
            div.style.backgroundColor = 'turquoise';
        },
            'key37': function () {
            h1.innerHTML = 'Left Behind';
            div.style.backgroundColor = 'springgreen';
        },
            'key39': function () {
            h1.innerHTML = 'Right Behind You';
            div.style.backgroundColor = 'yellowgreen';
        },
            'key32': function () {
            h1.innerHTML = 'Spaced Out';
            div.style.backgroundColor = 'black';
        },
        action: function (keyID) {
            this[keyID]();
        }
    }.action(newKp);
});