JSFiddle - React, Tailwind, and code Playground

by Clint

HTML

<p>
Try pressing some keys!
</p>
<div id="currentEvent">

</div>
<div id="eventLog">

</div>

CSS

#eventLog {
  overflow-y:scroll;
  height: 300px;
}

#currentEvent {
  font-size: 2rem;
  height: 3rem;
}

.key {
  width: 1rem;
  height: 1rem;
  border: 1px solid black;
  background-color: white;
}

JavaScript

function message(m) {
  document.getElementById("eventLog").insertAdjacentHTML('afterBegin', document.getElementById("currentEvent").innerHTML + "<br />");
	document.getElementById("currentEvent").innerHTML = m;

}

function handle(e) {
	var r = "<span style=\"display:inline-block; width: 4em\">" + e.type + "</span> ";
  console.dir(e);
  if (e.altKey) r += '<span class="key">ALT</span> ';
  if (e.ctrlKey) r += '<span class="key">CTRL</span> ';
  if (e.metaKey) r+= '<span class="key">META</span> ';
  if (e.shiftKey) r+= '<span class="key">SHIFT</span> ';
  
  r += " code: " + e.code;
  message(r);
}

document.addEventListener("keyup", handle);
document.addEventListener("keypress", handle);
document.addEventListener("keydown", handle);