Click in here
<br>
and press a key.

html {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #FFCC80;
  text-align: center;
  font-family: monospace;
  line-height: 1.4;
  font-size: 25px;
}
pre {
  text-align: left;
}

let mods = {
  "Alt": "Alt",
  "AltGraph": "AltGraph",
  "CapsLock": "CapsLock",
  "Control": "Control",
  "Meta": "Meta",
  "NumLock": "NumLock",
  "OS (non-IE)": "OS",
  "Win (IE)": "Win",
  "Scroll (IE)": "Scroll",
  "ScrollLock (non-IE)": "ScrollLock",
  "Shift": "Shift"
};

function addMods(event) {
  let txt = "";
  Object.keys(mods).forEach(mod => {
    let val = mods[mod],
      result = event.getModifierState(val);
    if (val === "location") {
      if (result !== 0) {
        result === 1 ? "1 (Left)" : "2 (Right)";
      }
    }
    txt += `<b>${mod}:</b> ${result}
    <br>&nbsp;&nbsp;`;
  });
  return txt;
}

document.addEventListener("keydown", function(event) {
  document.body.innerHTML = `
    <b>key:</b> ${event.key}<br>
    <b>repeat: </b> ${event.repeat}<br>
    <p></p>
    <b>getModifierState()</b><br>
    ${addMods(event)}`;
});