<header>
  <h2 class="title">Keyboard Events</h2>
  <p class="description">Демонструє керування рухом об'єкта на сторінці за допомогою подій клавіатури.</p>
</header>
<main>
  <div class="result">
    <div id="box"></div> <!-- квадрат, яким керуємо через клавіатуру -->
    <p>Використовуйте стрілки для руху, клавішу <strong>Space</strong> для зміни кольору.</p>
  </div>
</main>
body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#box {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  position: relative;
  transition: background-color 0.3s;
}
const box = document.getElementById('box');
let position = { top: 0, left: 0 };
const step = 10; // кількість пікселів, на яку рухатиметься квадрат

document.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowUp':
      position.top = Math.max(0, position.top - step);
      break;
    case 'ArrowDown':
      position.top = Math.min(window.innerHeight - box.offsetHeight, position.top + step);
      break;
    case 'ArrowLeft':
      position.left = Math.max(0, position.left - step);
      break;
    case 'ArrowRight':
      position.left = Math.min(window.innerWidth - box.offsetWidth, position.left + step);
      break;
    case ' ':
      // змінюємо колір при натисканні Space
      box.style.backgroundColor = getRandomColor();
      break;
  }
  
  // оновлюємо позицію квадрата
  box.style.top = position.top + 'px';
  box.style.left = position.left + 'px';
});

// Функція для отримання випадкового кольору
function getRandomColor() {
  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}

// Додаємо стилі для позиціонування
box.style.position = 'absolute';

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.