<h1>Press Any Key</h1>

<table>
  <tr>
    <th>
      Property Name
    </th>
    <th>
      Property Value
    </th>
  </tr>
  <tr>
    <td>type</td>
    <td class="type"></td>
  </tr>
  <tr>
    <td>key</td>
    <td class="key"></td>
  </tr>
  <tr>
    <td>code</td>
    <td class="code"></td>
  </tr>
  <tr>
    <td>repeat</td>
    <td class="repeat"></td>
  </tr>
  <tr>
    <td>altKey</td>
    <td class="altKey"></td>
  </tr>
  <tr>
    <td>ctrlKey</td>
    <td class="ctrlKey"></td>
  </tr>
  <tr>
    <td>metaKey</td>
    <td class="metaKey"></td>
  </tr>
  <tr>
    <td>shiftKey</td>
    <td class="shiftKey"></td>
  </tr>
</table>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  margin: 20px;
  font-family: "Khand";
  font-size: 1.2em;
}

h1 {
  text-align: center;
  text-transform: uppercase;
}

table {
  margin: 20px auto;
}

th,
td {
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  min-width: 300px;
}

th {
  background: black;
  color: white;
  text-transform: uppercase;
}

tr:nth-child(even) {
  background: #efefef;
}

document.addEventListener("keydown", logEventData);

document.addEventListener("keyup", logEventData);

function logEventData(event) {
  const { type, key, code, repeat, altKey, ctrlKey, metaKey, shiftKey } = event;

  document.querySelector("td.type").innerText = type;
  document.querySelector("td.key").innerText = key;
  document.querySelector("td.code").innerText = code;

  document.querySelector("td.repeat").innerText = repeat;
  document.querySelector("td.altKey").innerText = altKey;
  document.querySelector("td.ctrlKey").innerText = ctrlKey;
  document.querySelector("td.metaKey").innerText = metaKey;
  document.querySelector("td.shiftKey").innerText = shiftKey;
}