JSFiddle - React, Tailwind, and code Playground

by djatha

HTML

<div class='keyboard'>
    <span class='key' data-key='a'>A</span>
    <span class='key' data-key='b'>B</span>
    <span class='key' data-key='c'>C</span>
</div>    
<h4>Use the "keyboard" above to type:</h4>
<p id="notepad"></p>

CSS

div.keyboard {
    margin: 1em;
    padding: 1ex;        
    font-family: sans-serif;
    font-size: 15pt;
    font-weight: bold;
}

span.key {
    padding: 2ex;
    border: 1px solid dimgray;
    margin: 1ex;
    background: gray;
    color: ivory;
}

#notepad {
    font-family: serif;
    font-size: 13pt;
}
}

JavaScript

var notepad = document.getElementById('notepad');

var make_it_clickable = function(key) {
    var letter = key.dataset.key;
    key.addEventListener('click', function() {
        notepad.innerHTML = notepad.innerHTML + letter;
    });
};

var keys = document.querySelectorAll('span.key');
for(var i = 0; i < keys.length; i++) {
    make_it_clickable(keys[i]);
}