Как реализовать страницу с палитрой цветов и формой для добавления нового цвета с помощью input и js?

от
prokoding.ru > JavaScript > Как реализовать страницу с палитрой цветов и формой для добавления нового цвета с помощью input и js?

Для реализации страницы с палитрой цветов и формой для добавления нового цвета с использованием HTML, CSS и JavaScript, вам потребуется следующий структурный код:

1. HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Palette</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="color-palette"></div>
  <form id="color-form">
      <input type="color" id="color-input">
      <button type="submit">Add Color</button>
  </form>
  <script src="script.js"></script>
</body>
</html>

2. CSS (styles.css):

#color-palette {
  display: flex;
  flex-wrap: wrap;
}

.color-box {
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid black;
}

3. JavaScript (script.js):

const colorPalette = document.getElementById('color-palette');
const colorForm = document.getElementById('color-form');
const colorInput = document.getElementById('color-input');

// Функция для добавления нового цвета
function addColor(event) {
  event.preventDefault();
  
  const color = colorInput.value;
  
  if (color) {
    const colorBox = document.createElement('div');
    colorBox.classList.add('color-box');
    colorBox.style.backgroundColor = color;
    
    colorPalette.appendChild(colorBox);
    
    colorInput.value = ''; // Очистка поля ввода после добавления
  }
}

colorForm.addEventListener('submit', addColor);

Этот код создает простую страницу, на которой есть палитра цветов и форма для добавления нового цвета. Когда пользователь выбирает цвет в input и нажимает кнопку "Add Color", новый цвет добавляется на страницу в виде квадратной области с выбранным цветом.