• Теория
  • Теория

Испытание: Пиксель арт

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

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

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

Чтобы найти все «пиксели», используйте метод querySelectorAll. А чтобы добавить им обработчик клика — цикл for of. Мы уже работали с коллекциями и циклом в части «Коллекции и свойства элементов».

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 18 июня 2024. Всего от 6080 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Динамические стили элементов» тренажёра «Знакомство с JavaScript» можно после регистрации и оформления подписки.