Практическая работа №3

Во многих случаях вашему веб-сайту может потребоваться выбрать цвет. Возможно, у вас есть настраиваемый пользовательский интерфейс или вы реализуете приложение для рисования. Возможно, у вас есть редактируемый текст, и вам нужно позволить пользователю выбрать цвет текста. Или, возможно, ваше приложение позволяет пользователю назначать цвета папкам или элементам. Хотя исторически было необходимо реализовать свой собственный палитр цветов, HTML теперь обеспечивает поддержку браузеров, чтобы предоставить его для вашего использования через элемент <input>, используя «color» в качестве значения его атрибута type. Элемент <input> представляет цвет только в шестнадцатеричной нотации строки

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

Здесь HTML создает поле, которое содержит элемент управления выбора цвета (с меткой, созданной с использованием элемента <label>) и пустой элемент параграфа (<p>), в который мы выведем некоторый текст из нашего кода JavaScript.

<div id="box">
<label for="colorPicker">Border color:</label>
<input type="color" value="#c3c3c3" id="colorPicker">
<p id="output"></p>
</div>

CSS

CSS просто устанавливает размер для коробки и некоторые основные стили для внешнего вида. Граница также установлена ​​с шириной в 2 пикселя и цветом границы, который не будет длиться долго, из-за JavaScript ниже ..

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font-size:  16px ;
  font-family: 'Montserrat', sans-serif;
}

JavaScript

Здесь скрипт обрабатывает задачу обновления начального цвета границы, чтобы он соответствовал значению палитры цветов. Затем добавляются два обработчика событий для обработки ввода из элемента <input type = 'color'>

let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener("input", function(event) {
  box.style.borderColor = event.target.value;
}, false);

colorPicker.addEventListener("change", function(event) {
output.innerText = "Color set to " + colorPicker.value + ".";
}, false);

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

Событие изменения получено, когда значение палитры цветов будет завершено. Мы отвечаем, устанавливая содержимое элемента <p> с идентификатором «output» в строку, описывающую окончательно выбранный цвет.