<body class="my-auto mx-auto bg-gray-100">
<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
<div>
<p class="text-gray-600" id="info">
Press a key combi to see the magic 🪄
</p>
<div id="keys" class="hidden flex">
<div id="meta" class="hidden mx-2 p-2 border-2">Meta</div>
<div id="ctrl" class="hidden mx-2 p-2 border-2">Ctrl</div>
<div id="shift" class="hidden mx-2 p-2 border-2">Shift</div>
<div id="alt" class="hidden mx-2 p-2 border-2">Alt</div>
<div id="key" class="mx-2 p-2 border-2">Key</div>
</div>
</div>
</div>
</body>html {
height: 100vh;
display: flex;
}const key = document.getElementById("key"),
keys = document.getElementById("keys"),
info = document.getElementById("info"),
meta = document.getElementById("meta"),
ctrl = document.getElementById("ctrl"),
shift = document.getElementById("shift"),
alt = document.getElementById("alt");
document.onkeydown = function (e) {
if (
(!e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) ||
e.key === "Meta" ||
e.key === "Shift" ||
e.key === "Control" ||
e.key === "alt"
) {
return;
}
e.altKey ? alt.classList.remove("hidden") : alt.classList.add("hidden");
e.shiftKey ? shift.classList.remove("hidden") : shift.classList.add("hidden");
e.metaKey ? meta.classList.remove("hidden") : meta.classList.add("hidden");
e.ctrlKey ? ctrl.classList.remove("hidden") : ctrl.classList.add("hidden");
info.classList.add("hidden");
keys.classList.remove("hidden");
key.innerHTML = e.keyCode;
};
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.