JSFiddle - React, Tailwind, and code Playground
HTML
<div id="output"></div>
CSS
div#output {
background-color: #AAA;
width: 200px;
height: 50px;
text-align: center;
font-size: 40px;
}
div#output.ctrlKey {
background-color: #0F0;
}
div#output.noCtrlKey {
background-color: #F00;
}
JavaScript
var o = document.getElementById('output');
function applyState (state) {
this.innerHTML = state;
if (state)
this.className = 'ctrlKey';
else
this.className = 'noCtrlKey';
}
o.addEventListener('click', function(e) {
applyState.call(this,e.ctrlKey);
});
document.addEventListener('keyup', function(e) {
console.dir(e);
if (e.keyIdentifier.toLowerCase() == 'right')
{
applyState.call(o,e.ctrlKey);
}
});