event-keycodes

<!DOCTYPE html>

<head>

<style>

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: #383838;

font-family: 'Muli', sans-serif;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

.key {

border: 1px solid #999999;

background-color: #2B2B2B;

box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);

display: inline-flex;

align-items: center;

font-size: 20px;

font-weight: bold;

padding: 20px;

flex-direction: column;

margin: 10px;

min-width: 150px;

color: white;

position: relative;

}

.key small {

position: absolute;

top: -24px;

left: 0;

text-align: center;

width: 100%;

color: #c4c4c4;

font-size: 14px;

}

</style>

<title>Event KeyCodes</title>

</head>

<body>

Press any key to get the keyCode

</div>

window.addEventListener('keydown', (event) => {

insert.innerHTML = `

${event.key === ' ' ? 'Space' : event.key}

<small>event.key</small>

</div>

${event.keyCode}

<small>event.keyCode</small>

</div>

${event.code}

<small>event.code</small>

</div>

`

})</script>

</body>

</html>