Рисовалка в браузере, которая учит управлять страницей через JavaScript

У The Odin Project есть хороший учебный проект: собрать Etch-a-Sketch прямо в браузере. Это такая простая рисовалка: наводите курсор на клетки, и они закрашиваются.

Ценность не в самой игрушке, а в том, что вы руками собираете маленький интерфейс: создаёте сетку из div’ов через JavaScript, раскладываете её с помощью Flexbox, вешаете события наведения, добавляете кнопку для нового размера поля и проверяете ввод, чтобы пользователь не сломал страницу огромной сеткой.

Такие проекты хорошо связывают HTML, CSS и JS в одну понятную штуку. После базовых упражнений это как раз тот шаг, где становится видно, зачем нужны события, DOM и DevTools. Задание можно пройти как есть, а потом добавить случайные цвета, очистку поля или постепенное затемнение клеток.

Если будет что-то непонятно, то можно посмотреть варианты реализации других участников.

#веб #javascript