Interactive Key Code Display Using JavaScript

In this project, we are going to build a simple yet interesting web application that displays the key, key code, and code of the key pressed on the keyboard. This project is perfect for beginners who want to understand how to capture and handle keyboard events in JavaScript.

HTML Structure

Let's start with the HTML structure. Here’s the HTML code for our project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Event KeyCodes</title>
    <link rel="stylesheet" type="text/css" href="../styles.css" />
    <style>
      table, th, td {
        border: 1px solid #e7e7e7;
      }
      .project {
        background-color: #1c1c1c;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 100vh;
      }
      .color {
        color: aliceblue;
        display: flex;
        flex-direction: row;
      }
    </style>
</head>
<body>
    <div class="project">
      <div id="insert">
        <div class="key">Press the key and watch the magic</div>
      </div>
    </div>
    <script src="./script.js"></script>
</body>
</html>

This HTML file sets up a simple structure with a navigation bar and a main content area where the key information will be displayed.

This what our mini project looks like with basic HTML and CSS, now we will add js to make it functional.

JavaScript for Functionality

Now, let’s dive into the JavaScript code that makes this application work. Here’s the JavaScript code:

const insert = document.getElementById('insert');

window.addEventListener('keydown', (e) => {
  insert.innerHTML = `
    <div class="color">
      <table>
        <tr>
          <th>Key</th>
          <th>KeyCode</th>
          <th>Code</th>
        </tr>
        <tr>
          <td>${e.key === ' ' ? 'space' : e.key}</td>
          <td>${e.keyCode}</td>
          <td>${e.code}</td>
        </tr>
      </table>
    </div>
  `;
});

Explaining the JavaScript Code:

Selecting the Element: We start by selecting the insert element where we will display the key information.

const insert = document.getElementById('insert');

Adding an Event Listener: We add an event listener to the window object to listen for keydown events. This event fires whenever a key is pressed.

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

Updating the Inner HTML: When a key is pressed, we dynamically update the innerHTML of the insert element to display a table with the key information.

insert.innerHTML = `
  <div class="color">
    <table>
      <tr>
        <th>Key</th>
        <th>KeyCode</th>
        <th>Code</th>
      </tr>
      <tr>
        <td>${e.key === ' ' ? 'space' : e.key}</td> //ternary operator as space was not appearing
        <td>${e.keyCode}</td>
        <td>${e.code}</td>
      </tr>
    </table>
  </div>
`;
});

Key: We check if the key pressed is a space (' '). If so, we display 'space'; otherwise, we display the key itself (e.key).
KeyCode: We display the key code of the key pressed (e.keyCode).
Code: We display the code of the key pressed (e.code)

Wrap Up

This project demonstrates how to capture and handle keyboard events in JavaScript. It’s a simple yet powerful example of how you can interact with user input to create dynamic and responsive web applications.

Building an Interactive Key Code Display with JavaScript

Table of contents

HTML Structure

JavaScript for Functionality

Wrap Up