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

Вот как он должен работать. Полотно для рисования состоит из «пикселей» — пустых элементов div одинакового размера. Когда пользователь кликает на «пиксель», тот должен закраситься определённым цветом. Цвет можно выбрать в выпадающем списке рядом с полотном. Также есть инструмент «ластик». Если он включён, «пиксель», на который кликнули, закрашивается белым цветом.

1. Все «пиксели» имеют класс pixel.
2. Выпадающий список с цветами имеет класс chosen-color.
3. «Ластик» — это чекбокс с классом eraser.
4. Когда на «пиксель» кликают, у него должен измениться цвет фона.
5. Если в момент клика ластик выключен, фон нажатого «пикселя» должен стать того цвета, который выбран в списке.
6. Если в момент клика ластик включён, фон нажатого «пикселя» должен стать белым — 'white'.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

let pixels = document.querySelectorAll('.pixel');
let chosenColor = document.querySelector('.chosen-color');
let eraser = document.querySelector('.eraser');

for (let pixel of pixels) {
  pixel.onclick = function () {
    if (eraser.checked) {
      pixel.style.backgroundColor = 'white';
    } else {
      pixel.style.backgroundColor = chosenColor.value;
    }
  };
}