Keyboard input

document.querySelector("#keyInput").addEventListener('keydown', function (e) {
  e.preventDefault();
  document.querySelector("#keyCode").innerText =
    "Key code (Deprecated): " + e.keyCode +
    "\nkey: " + e.key +
    "\ncode: " + e.code +
    "\ntype: " + e.type +
    "\nctrlKey: " + e.ctrlKey +
    "\naltKey: " + e.altKey +
    "\nmetaKey: " + e.metaKey +
    "\nshiftKey: " + e.shiftKey +
    "\nisComposing: " + e.isComposing +
    "\nlocation: " + e.location +
    "\nrepeat: " + e.repeat;

  document.querySelector("#msg").innerText = showMsg(e.keyCode);
});
document.querySelector("#keyInput").addEventListener('keyup', function (e) {
  document.querySelector("#keyCode").innerText =
    "Key code (Deprecated): " + e.keyCode +
    "\nkey: " + e.key +
    "\ncode: " + e.code +
    "\ntype: " + e.type +
    "\nctrlKey: " + e.ctrlKey +
    "\naltKey: " + e.altKey +
    "\nmetaKey: " + e.metaKey +
    "\nshiftKey: " + e.shiftKey +
    "\nisComposing: " + e.isComposing +
    "\nlocation: " + e.location +
    "\nrepeat: " + e.repeat;

  document.querySelector("#msg").innerText = showMsg(e.keyCode);
});

function showMsg(key) {
  switch (key) {
    case 37:
      return "left";
      break;
    case 38:
      return "up";
      break;
    case 39:
      return "right";
      break;
    case 40:
      return "down";
      break;
    default:
      return "An other key";
      break;
  }
}