Список задач на чистом JS
Вопрос
Как бы ты сделал список задач с добавлением, отметкой и удалением на чистом JavaScript без фреймворка?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Хранить состояние в массиве объектов и рендерить DOM из него
Форма со слушателем submit и preventDefault, проверка пустого ввода
Один делегированный обработчик клика на списке, поиск через closest и data-атрибуты
Текст задач через textContent, а не innerHTML
Вставка через DocumentFragment или replaceChildren
Доступность: настоящие button и checkbox с подписями
Что могут спросить следом
- Как сохранить список между перезагрузками?
- Что изменится, если задач станет десять тысяч?
- Почему не вешать обработчик на каждую кнопку?
Разбор
Я бы держал источник правды в массиве задач с id, текстом и флагом выполнения, а DOM рендерил из него функцией render. Добавление через форму: слушаю submit, отменяю перезагрузку, обрезаю пробелы, пустое не добавляю, очищаю поле. Отметку и удаление обрабатываю одним делегированным обработчиком на списке: по closest нахожу кнопку с data-action и строку с data-id, меняю массив и перерисовываю. Текст вставляю через textContent, чтобы не было XSS. Элементы собираю во фрагмент и вставляю одной операцией. Для отметки беру настоящий checkbox, для удаления кнопку с понятной подписью для скринридера. Сохранение между перезагрузками через localStorage в try/catch.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.