<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Detect Key Presses</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="result">Press Any Key To Get Started</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(#2887e3 50%, #16191e 50%);
}
#result {
background-color: #242831;
width: 80vw;
max-width: 600px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 80px 40px;
text-align: center;
color: #f5f5f5;
font-size: 3.6vmin;
border-radius: 10px;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
font-style: italic;
}
#result span:nth-child(1) {
color: #2887e3;
font-size: 3em;
display: block;
font-style: normal;
}
#result span:nth-child(2) {
font-size: 1.5em;
font-style: normal;
}window.addEventListener("keydown", (e) => {
document.getElementById(
"result"
).innerHTML = `The key pressed is <span>${e.key}</span><span>Key Code: ${e.keyCode}</span>`;
});a
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.