Для реализации страницы с палитрой цветов и формой для добавления нового цвета с использованием JavaScript и <input> можно написать следующий код:
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>
</head>
<body>
<div id="color-palette">
<div id="colors">
<div class="color" style="background-color: red;"></div>
<div class="color" style="background-color: blue;"></div>
<div class="color" style="background-color: green;"></div>
<!-- другие цвета изначальной палитры -->
</div>
<form id="color-form">
<label for="color-input">Add a custom color:</label>
<input type="color" id="color-input">
<button type="submit">Add Color</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
2. Напишем JavaScript код для добавления функциональности:
document.addEventListener('DOMContentLoaded', function() {
const colorsDiv = document.getElementById('colors');
const colorForm = document.getElementById('color-form');
const colorInput = document.getElementById('color-input');
colorForm.addEventListener('submit', function(event) {
event.preventDefault();
const newColor = colorInput.value;
const newColorDiv = document.createElement('div');
newColorDiv.classList.add('color');
newColorDiv.style.backgroundColor = newColor;
colorsDiv.appendChild(newColorDiv);
colorInput.value = '';
});
});
Этот JavaScript код добавляет слушатель события "submit" на форму color-form, который предотвращает стандартное поведение формы (перезагрузку страницы) при ее отправке. Затем он создает новый div для нового цвета, добавляет необходимые классы и стили, и добавляет его внутрь элемента с палитрой цветов.
Теперь страница будет иметь возможность добавлять новые цвета в палитру с помощью формы <input type="color">.