How to Detect Pressed Key in HTML CSS & JS

Hey friends, today in this blog, you’ll learn how to Detect User Pressed Key in HTML CSS & JavaScript. In the earlier blog, I have shared how to Detect User Browser in JavaScript, and now it’s time to create a simple program using vanilla JavaScript that detects the user pressed key.

In this beginner project (Detect Pressed Key), when you press any key, the key name and key code are shown in the box as you can see in the preview image. After reading this blog, you’ll be able to perform different operations on a particular user key pressed.

Some Related Posts:-

See also  Minimalist CSS Framework For Web Design - MVP.css

If you don’t want to read the blog, then you can watch a demo or full video tutorial of this project (Detect Key Presses in JavaScript).

Detect Pressed Key in JavaScript [Source Codes]

To create a program that Detect User Pressed Key in JavaScript. First, you need to create two Files: HTML & CSS files. After creating these files just paste the following codes into your file. First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Coding By codeithub- youtube.com/codingnepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">  
    <title>Detect Pressed Key in JavaScript | codeithub</title>
    <link rel="stylesheet" href="https://www.codeithub.com/detect-pressed-key-javascript/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="box">
      <p class="text">Press any key</p>
      <div class="content">
        <div class="key-code"></div>
        <div class="key-name"></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>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #17A2B8;
}
.box{
  padding: 25px;
  width: 290px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.text, .key-code, .key-name{
  font-size: 45px;
  color: #17A2B8;
  font-weight: 500;
}
.text{
  font-size: 30px;
  text-align: center;
  pointer-events: none;
}
.box.active .text{
  display: none;
}
.content, .key-code, .details{
  display: flex;
  align-items: center;
  justify-content: center;
}
.content{
  display: none;
  flex-direction: column;
}
.box.active .content{
  display: flex;
}
.content .key-code{
  height: 110px;
  width: 110px;
  background: #fff;
  border-radius: 50%;
  margin-bottom: 15px;
  pointer-events: none;
  border: 5px solid #17A2B8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.content .details{
  width: 100%;
  margin-top: 15px;
  justify-content: space-evenly;
}
.details p{
  width: 100%;
  font-size: 18px;
  text-align: center;
}
.details p:last-child{
  border-left: 1px solid #bfbfbf;
}

That’s all, now you’ve successfully created a simple program that Detects User Pressed Key using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problem then feel free to contact me through the contact page.

See also  Grid Overlays For Modern Web Layout Design - Graaf

Leave a Reply

Your email address will not be published. Required fields are marked *