Изменение цвета фона с помощью JavaScript

О проекте

В этом уроке вы создадите интерактивную палитру цветов, где при нажатии на любую из кнопок фон страницы будет меняться на выбранный оттенок.

Пример реализации:

Идея

Идея в том, что вы сами напишите скрипт к вёрстке по гайду.

Явных подсказок и указаний в инструкции не будет, но будут ссылки на документацию по нужным темам.

Простой пример: нужно создать обработчик событий, если вы не знаете как это сделать, то переходите по ссылке из подвала проекта и изучайте документацию. После восполнения знаний — возвращайтесь к проекту и продолжайте выполнять задание.

Тем самым вы будете изучать JavaScript, собирая действующую программу и восполняя недостающие знания.

Необходимые знания

Базовый HTML/CSS
Понимание структуры JS-кода
Умение искать информацию в документации

Структура

index.html
style.css
script.js

Вёрстка

Создайте HTML- и CSS-файлы у себя на компьютере и скопируйте вёрстку проекта:

HTML
CSS

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Hexorcist</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Hexorcist</h1>
  <div id="colorbox"></div>

  <script src="script.js"></script>
</body>

</html>

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 1rem;
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

h1 {
  color: #6203e0;
  margin-bottom: 1rem;
}

#colorbox {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  gap: 12px;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

.color-button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}

.color-button:hover {
  transform: scale(1.1);
}

Инструкция

Шаг 1: Создайте массив с цветами

Объявите переменную colors и сохраните в неё массив из нескольких HEX-цветов, например: "#e58e26", "#f9b4ab", "#B1FB17", "#78e08f", "#fd79a8".

Эти цвета будут использоваться для создания кнопок и изменения фона страницы.

Шаг 2: Найдите контейнер для кнопок

Объявите переменную colorBox. С помощью метода document.getElementById(), получите доступ к HTML-элементу, у которого ID равен "colorbox".

Этот элемент будет служить контейнером для цветных кнопок.

Шаг 3: Создайте кнопки и добавьте их на страницу

Используя метод forEach(), пройдитесь по каждому цвету из массива colors. У каждого элемента есть цвет и его номер (index).

Для каждой итерации сделайте следующее:

Создайте новый HTML-элемент <button> с помощью document.createElement.
Добавьте этому элементу класс 'color-button', чтобы можно было стилизовать его через CSS.
Установите фоновый цвет кнопки с помощью свойства style.backgroundColor.
Добавьте обработчик события “клик”: при клике на кнопку фон страницы должен меняться на текущий цвет.
Добавьте созданную кнопку внутрь контейнера colorBox с помощью метода append.

💡 Подсказки

Используйте стрелочные функции, чтобы сделать код короче и понятнее.
Внутри addEventListener также используйте стрелочную функцию для передачи нужного цвета.

Результат

Когда всё сделано правильно, на странице появятся красивые цветные кнопки, и при нажатии на любую из них фон будет меняться.

Ссылки по теме

Ознакомьтесь с дополнительными ресурсами, для детального изучения темы.

Готовый скрипт

Старайтесь не смотреть ответ, пока собираете проект. Вся соль задумки — в самостоятельном изучении документации. Готовый скрипт прикреплен для сравнения результатов.

Ответ

const colors = ["#e58e26", "#f9b4ab", "#B1FB17", "#78e08f", "#fd79a8"];
const colorBox = document.getElementById('colorbox');

colors.forEach((color, index) => {
  const colorButton = document.createElement('button');
  colorButton.className = 'color-button';
  colorButton.style.backgroundColor = color;
  colorButton.addEventListener('click', () => {
    document.body.style.background = color;
  });
colorBox.append(colorButton);
});