Key Code Finder

by trentHarlem

HTML

<div id='keycode'>
</div>
<div id='key'>
</div>
<div id='code'>
</div>
<div id='location'>
</div>

CSS

body {
  background-color: gray;
  margin: auto;
}
div {
  background-color: whitesmoke;
  margin: 2px;
  display: flex;
  padding: 1em;
  border: 1px solid #222;
  border-radius: 10px;
  width: 50%;
  height: 30px;
}

JavaScript

const keyCode = document.getElementById('keycode');
const key = document.getElementById('key');
const code = document.getElementById('code');
const eLocation = document.getElementById('location');

const keycodes = () => {
  document.addEventListener('keydown', function(e) {
    keyCode.innerHTML = `Key code: (deprecated) ${e.which}`;
    key.innerHTML = `Key: ${e.key}`;
    code.innerHTML = `Code: ${e.code}`;
    eLocation.innerHTML = `Location: ${e.location}`;
    console.log('keyCode', e.which, 'key', e.key, 'code', e.code, 'location', e.location)
  });
};
keycodes();