index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<title>Detect Pressed Keys | EmeditWEB</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta name="viewport" content="width=device-width, initial-scle=1.0">
</head>
<body>
<div class="box">
	<p class="text">Press any key</p>
  <div class="content">
	<div class="key-code">16</div>
	<div class="key-name">SHIFT</div>
	<div class="details">
	<p class="key">Key: <span></span></p>
	<p class="code">Code: <span></span></p>	
	</div>
   </div>
  </div>

<script>
	const box = document.querySelector(".box");
	document.addEventListener("keydown", e =>{
	let keyName = e.keyCode === 32 ? "Space" : e.key; 
    box.querySelector(".key-code").innerText = e.keyCode;
	box.querySelector(".key-name").innerText = keyName.toUpperCase();
	box.querySelector(".key span").innerText = keyName;
	box.querySelector(".code span").innerText = e.keyCode;
	box.classList.add("active");
	}); 
</script>


</body>
</html>