Следим за нажатием клавиш на JavaScript

Всем привет ✌️

Сегодняшним субботним утром я решила, что хочу сделать какую-то несложную ванильную штуку... Поэтому сегодня мы реализуем мини проект, который позволит нам отслеживать клавишу, которую нажал пользователь и выводить ее код.

Для начала соберем немного HTML верстки:

<div class="box">
  <p class="text">Нажми любую кнопку</p>
    <div class="content">
      <div class="key-code"></div>
      <div class="key-name"></div>
      <div class="details">
        <p class="key">Кнопка: <span></span></p>
        <p class="code">Код: <span></span></p>
       </div>
    </div>
</div>

Как видите тут ничего сложного, просто заготовка для нашей карточкой для отображения данных.

Далее давайте добавим немного JavaScript для того, чтобы оживить нашу страничку, код в целом тоже очень простой и выглядит примерно так:

const box = document.querySelector(".box");

document.addEventListener("keydown", event => {
  let keyName = event.keyCode === 32 ? "Space" : event.key;
  
  box.querySelector(".key-code").innerText = event.keyCode;
  box.querySelector(".key-name").innerText = keyName.toUpperCase();
  box.querySelector(".key span").innerText = keyName;
  box.querySelector(".code span").innerText = event.keyCode;
  
  if (!box.classList.contains("active")) {
     box.classList.add("active");
  }
});

Для пробела нужно такое переопределение т.к его event.key === ''

В целом эта штука уже сейчас будет работать, но она выглядит достаточно уныло в виде черного текста на белом фоне, так что давайте добавим немного красок:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
  
body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #FAFAFA;
  font-family: 'Poppins', sans-serif;
}

.box {
  padding: 25px;
  width: 290px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.1);
}

.text, .key-code, .key-name{
  font-size: 45px;
  color: #080808;
  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 purple;
  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;
}

Ловите песочницу:

На этом сегодняшний мини проект ванильного кода окончен, я понимаю что информативности тут для профи нет никакой, но вот новичкам - явно будет полезно написать что-то до ужаса простое и понятное!

До новых встреч!

Читайте дальше:

#javascript #css #html #заметка_на_коленке