- Теория
- Теория
Испытание: Пиксель арт
Котам не чуждо чувство прекрасного. Например, Кекс очень ценит живопись. И будет рад, если любимый разработчик запрограммирует для него маленький графический редактор.
Вот как он должен работать. Полотно для рисования состоит из «пикселей» — пустых элементов div одинакового размера. Когда пользователь кликает на «пиксель», тот должен закраситься определённым цветом. Цвет можно выбрать в выпадающем списке рядом с полотном. Также есть инструмент «ластик». Если он включён, «пиксель», на который кликнули, закрашивается белым цветом.
- Все «пиксели» имеют класс
pixel
. - Выпадающий список с цветами имеет класс
chosen-color
. - «Ластик» — это чекбокс с классом
eraser
. - Когда на «пиксель» кликают, у него должен измениться цвет фона.
- Если в момент клика ластик выключен, фон нажатого «пикселя» должен стать того цвета, который выбран в списке.
- Если в момент клика ластик включён, фон нажатого «пикселя» должен стать белым —
'white'
.
Чтобы найти все «пиксели», используйте метод querySelectorAll
. А чтобы добавить им обработчик клика — цикл for of
. Мы уже работали с коллекциями и циклом в части «Коллекции и свойства элементов».
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.