HomeJavascriptDetect Key Presses & Key Code With Javascript

Detect Key Presses & Key Code With Javascript

Hello everyone. Welcome to yet another exciting tutorial from Coding Artist. In todays’ tutorial, we will create a keypress detector. To build this project, we need HTML, CSS and Javascript.

When the user clicks on any keyboard key, the detector displays the name of the key pressed. It also shows the corresponding key code. This is a beginner-friendly project. If you are looking for a more advanced and complicated javascript project, you can check them out here.

Video Tutorial:

If you prefer to learn by coding along to a video tutorial, you should check out this video here down below. I post regular tips, tricks and resources on my youtube channel. So do subscribe to my channel to stay updated with all the latest tutorials.

Project Folder Structure:

Now before we start coding. Let us create the project folder structure. The project folder consists of three files. These files are index.html, style.css and script.js. They are the HTML document, the stylesheet and the script file respectively.

HTML:

Let us now start with the HTML code. Do Copy the code provided below and paste it into your HTML document. The HTML builds the layout needed for the project. It consists of a single div element with id – ‘result’.

<!DOCTYPE html>
<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>

CSS:

Now moving on to making this layout look beautiful we add CSS. To do so copy the code below and paste it into your CSS file. We start by discarding paddings and margins from all the elements. We also set the ‘font-family’ to ‘Poppins’.

Other Tutorial You Might Like:

In the next step, we set the background color of the body to a linear gradient with solid stops. In the last step, we centre the ‘result’ div and add some box-shadow to it.

* {
  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;
}

Javascript:

To add functionality to this detector we use Javascript. We add a ‘keydown’ event listener to the window. On keydown, the HTML of the result changes to the name of the pressed and its key code. The ‘key’ property gives us the key name while ‘keyCode’ gives us the code. Our Key Press Detector is now ready.

window.addEventListener("keydown", (e) => {
  document.getElementById(
    "result"
  ).innerHTML = `The key pressed is <span>${e.key}</span><span>Key Code: ${e.keyCode}</span>`;
});

If you have any issues while creating this code you can download the source code by clicking on the download button below. Also if you have any queries, suggestions, or feedback you can comment on them below.
Happy Coding!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

7 − two =

Most Popular