Условие
В script.js по кнопке #add возьмите текст из #task. Если после trim строка не пустая - создайте li, добавьте в #list, очистите поле и обновите #count. Клик по пункту переключает класс done. У вас должно получиться так же, как во вкладке «Результат» - смотрите там конкретный итог задания.
Что нужно сделать
- По кнопке «Добавить» создайте пункт списка с текстом из поля.
- Пустую строку (и только пробелы) не добавляйте; поле очищайте.
- Клик по пункту отмечает его; обновляйте счётчик дел.
Подсказка для новичка
Пишите код под комментарием // >>> Пишите код здесь <<<. Ориентируйтесь на раздел «Дополнительная информация» ниже.
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Добавление дел · пустые нельзя · клик отмечает · счётчик
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- объявление документа HTML5.<html lang="ru">- корневой тег страницы; атрибут lang="ru" - язык интерфейса.<head>- служебная «шапка»: кодировка, title, подключение CSS.<meta charset="UTF-8" />- кодировка символов (кириллица отображается корректно).<title>- текст на вкладке браузера («Список дел»).<link rel="stylesheet" href="style.css" />- подключает файл style.css к странице. Без этой строки стили из CSS не применяются.<body>- видимая часть страницы: всё, что пользователь видит в превью.<input id="task" type="text" placeholder="Новое дело">- поле ввода #task.<button id="add" type="button">- кнопка #add.<p>- абзац.<span id="count">- элемент с идентификатором id="count" (JS ищет через getElementById / #count).<ul id="list">- список #list.body → font-family: Arial, sans-serif- семейство шрифта: Arial, sans-serif. Задаёт, каким шрифтом рисовать текст.body → margin: 24px- внешний отступ 24px. Отодвигает блок от краёв родителя / страницы.body → background: #f1f5f9- цвет (или заливка) фона: #f1f5f9.#task → padding: 8px 10px- внутренний отступ 8px 10px - пространство между рамкой и содержимым.#task → font-size: 16px- размер шрифта: 16px.#add → padding: 8px 14px- внутренний отступ 8px 14px - пространство между рамкой и содержимым.#add → margin-left: 8px- свойство margin-left со значением 8px.#add → background: #2563eb- цвет (или заливка) фона: #2563eb.#add → color: #fff- цвет текста: #fff.#add → border: 0- рамка: 0 (толщина, стиль линии, цвет).#add → font-weight: 700- насыщенность шрифта: 700 (например 700 - полужирный).#count → font-weight: 700- насыщенность шрифта: 700 (например 700 - полужирный).#list → padding-left: 20px- свойство padding-left со значением 20px.li → margin: 6px 0- внешний отступ 6px 0. Отодвигает блок от краёв родителя / страницы.li → cursor: pointer- вид курсора: pointer.li.done → text-decoration: line-through- свойство text-decoration со значением line-through.li.done → color: #64748b- цвет текста: #64748b.document.getElementById("add")- найти элемент с id="add" в DOM.textContent- текстовое содержимое элемента (безопасно для обычного текста).const- объявление константы (ссылку нельзя переназначить).function- объявление функции.addEventListener- подписка на событие (click, input и т.д.).===- строгое сравнение (тип и значение).if / else- условный оператор: выполнить код при истине..length- длина строки или массива.return- вернуть значение из функции.// >>> Пишите код здесь <<<- маркер в стартере: место для вашего решения..trim()- убрать пробелы по краям строки.classList- управление CSS-классами элемента.
Слева файлы редактора: script.js (здесь решаете задание), index.html и style.css (готовая разметка и стили - обычно менять не нужно). Ниже - важные понятия по теме задачи.
Что нужно
createElement("li")+appendChild.trim()- пустые строки не добавлять, поле очищать.classList.toggle("done")по клику на пункт.#count= число элементов в списке.
Коротко: add → li в ul; пустые нельзя; клик → done; count.