JSFiddle - React, Tailwind, and code Playground

by romario333

HTML

<div id="alphabet"></div>
<a href=#>type some letters</a>

CSS

span {
    border: 1px solid black;
    padding: 5px;
    margin: 3px;
    display: block;
    float: left;
}

div {
    clear: both;
}

JavaScript

var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var alphabetDiv = $('#alphabet');
var alphabetSpans = {};
for (var i = 0; i < alphabet.length; i++) {
    
    var c = alphabet[i];
    alphabetSpans[c] = $('<span>' + c + '</span>');
    alphabetDiv.append(alphabetSpans[c]);
}

$(document).on('keydown', function(e) {
    var c = String.fromCharCode(e.keyCode);
    if (alphabetSpans[c]) {
        alphabetSpans[c].css('background-color', 'gray');
    };
});

$(document).on('keyup', function(e) {
    var c = String.fromCharCode(e.keyCode);
    if (alphabetSpans[c]) {
        alphabetSpans[c].css('background-color', 'white');
    };
});

$('a').focus();