<html>
<head>
<style type="text/css">
table, td, th {
border: 1px solid #333;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Key</th>
<th>Code</th>
<th>Location</th>
</tr>
</thead>
<tbody id=table></tbody>
</table>
<script type="text/javascript">
let table = document.getElementById('table');
document.addEventListener('keydown', (event) => {
let row = document.createElement('tr');
table.prepend(row);
let key = document.createElement('td');
key.textContent = event.key;
row.append(key);
let code = document.createElement('td');
code.textContent = event.code;
row.append(code);
let location = document.createElement('td');
switch (event.location) {
case KeyboardEvent.DOM_KEY_LOCATION_STANDARD:
location.textContent = 'Standard';
break;
case KeyboardEvent.DOM_KEY_LOCATION_LEFT:
location.textContent = 'Left';
break;
case KeyboardEvent.DOM_KEY_LOCATION_RIGHT:
location.textContent = 'Right';
break;
case KeyboardEvent.DOM_KEY_LOCATION_NUMPAD:
location.textContent = 'Numpad';
break;
}
row.append(location);
});
</script>
</body>
</html>
