What key belongs where? Find out with JavaScript

I should seriously think about getting that website up so that I can show it as some sort of portfolio or resume, I just can't seem to find inspiration to do something worthwhile, or maybe I am scared that whatever I come up with is just not good enough for those looking to hire a junior JavaScript developer... either way, I know I should get to it sooner rather later.

In the meantime, I leave you with yet another little project that helps me keep grinding my skills and at the same time, build another layer of my soon to be portfolio.

Event Key Codes

This project is about building a little app that shows the code for any key on the user's keyboard. This means that the user can press any key and this app will show what is the code for that key. This might look like it's not that useful, but remember that the whole point of these mini projects to establish some basis for other project ideas or to be able to expand on these idea.

As MDN likes to define it, this feature can help gamers: "This property is useful when you want to handle keys based on their physical positions on the input device rather than the characters associated with those keys; this is especially common when writing code to handle input for games that simulate a gamepad-like environment using keys on the keyboard."

HTML Code

  <body>
    <div id="insert">
      I'm inserting the boxes here for showing purposes, but they will be added and modified via JavaScript

      <div class="key">Press any key to get its code</div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(90deg, #ee6767, #df9c97);
  font-family: "Muli" sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  overflow: hidden;
  /* The max width and margin auto help me keep the content centered. */
  max-width: 400px;
  margin: auto;
}

.key {
  border: 1px solid #310502;
  background-color: #ffffff;
  color: rgb(63, 0, 0);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  /*  This positions the boxes horizontally */
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  padding: 20px;
  flex-direction: column;
  margin: 10px;
  min-width: 150px;
  position: relative;
}

I position the .key boxes relative because I want to position the small class boxes absolute within them

.key small {
  position: absolute;
  top: -24px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #555;
  font-size: 14px;
}

JS

Remember: window is the top level object in the browser so, just to show you how the code will work:

 window.addEventListener("keydown", (event) => {
   console.log(event);
 });

So whenever I press any key, the console shows a ton of properties. I pressed the 3 key, and I get the code NumPad3, that's what I want to display.

So, for the real code now:

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

window.addEventListener("keydown", (event) => {
  insert.innerHTML = `
  
  ${event.key === " " ? "Space" : event.key}
  event.key


  ${event.code}
  event.code
`;
});

As you can see this is a pretty simple project but can be useful to get ideas for more complex projects, I'm quite happy with the result.

_{These projects are based on a CSS, HTML and JS paid course I got on Udemy by Brad Traversy. I made my own changes and tweaks but the template so to speak, is his idea and I do not claim them to be my own. If you are looking to practice CSS and JavaScript, his courses are the way to go, check them out on Udemy.}