Испытание: Список задач
В этой демонстрации мы разберём испытание «Список задач» из части «Условия и создание элементов».
Нам предстоит запрограммировать список задач. Скрипт уже частично написан, осталось его доработать.
Приступим!
Сначала разберём уже написанный код. На первых строках объявлены четыре переменные:
list
— список задач,input
— поле ввода,form
— форма добавления новой задачи,priority
— кнопка-переключатель приоритета.
Ниже переменных находится обработчик событийonclick
. Он добавлен переключателю приоритета priority
.
Продолжаем разбирать исходное состояние кода. Посмотрим, что произойдёт при клике на переключатель приоритета (кнопка под полем ввода с текстом «Важная задача»).
Во-первых, у переключателя переключится класс is-important
. Если такого класса у элемента не было, то он добавится. А если класс был, то уберётся. Так работает метод classList.toggle, о нём рассказывалось в части «Основы JavaScript».
После переключателя класса в исходном коде находится условная конструкция. В условии использован метод classList.contains . Он проверяет, есть ли у элемента указанный класс. Если класс есть, метод вернёт true
, иначе — false
.
В нашем случае, метод проверяет, есть ли у переключателя класс is-important
.
В зависимости от условия у переключателя приоритета изменяется текстовое содержимоеtextContent
. Если метод classList.contains
вернул true
, то на переключателе будет написано 'Важная задача'
. Если метод вернул false
, то надпись будет 'Обычная задача'
.
Можете покликать на переключатель и убедиться.
После обработчика onclick
в исходном коде идёт ещё один обработчик — onsubmit. Он срабатывает, когда пользователь отправляет форму.
evt.preventDefault();
внутри обработчика не даёт отправить данные на сервер.
Мы разобрали уже написанный код. Теперь посмотрим, что требуется сделать в задании. Первый пункт ТЗ:
- Каждая задача в списке — это элемент
li
. При отправке формы (переменная form
) новая задача добавляется в конец списка (переменная list
).
Чтобы добавить новую задачу в список, надо, прежде всего, её создать. Новая задача должна добавляться в список, когда пользователь отправляет форму. Это значит, что создавать задачу и добавлять её в список нужно внутри обработчика событий onsubmit
. Отметим это.
Второй пункт ТЗ:
- Текст задачи берётся из поля ввода (переменная
input
).
Добавлять текст задачи логично после её создания, но перед добавлением в список. Так и запишем.
Третий пункт:
- Если у переключателя приоритета (переменная
priority
) есть класс is-important
, то новой задаче также добавляется класс is-important
.
Для этого пункта нам понадобится условная конструкция. В условии будем проверять, есть ли у переключателя приоритета класс is-important
. Сделаем это перед добавлением задачи в список.
Если класс у переключателя есть, добавляем новой задаче такой же класс.
Последнее, бонусное задание:
- После того, как задача добавится в список, поле ввода можно очистить.
Сделаем это последним шагом, перед закрывающей фигурной скобкой обработчика событий.
Мы разобрали, что требуется сделать в этом испытании. Начнём писать код!
Для начала создадим с помощью метода createElement элемент li
и запишем его в переменную. Назовём её newTask
(«новая задача»).
Новая задача будет создаваться каждый раз, когда пользователь отправляет форму. Но на странице задача не появится, пока мы её туда не добавим. Для этого используем метод append.
Введите что-нибудь в поле ввода на странице и нажмите на кнопку «Добавить в список». В списке появится новый пункт. Это значит, что наш код работает!
Теперь нужно взять текст из поля ввода и записать его в текстовое содержимое новой задачи.
Текст, который ввёл пользователь, хранится в свойстве value поля ввода. Запишем его в свойство textContent новой задачи.
Добавьте в список новую задачу, чтобы проверить, что всё работает.
Обратите внимание, код из этого шага уже проходит первый тест в испытании.
Займёмся приоритетом новых задач. Проверим, есть ли у переключателя класс is-important
. Точно такая же проверка уже есть выше в обработчике onclick
. Скопируем её оттуда.
Если класс у переключателя есть, добавим новой задаче класс is-important
. Используем для этого метод classList.add.
Если класса нет и проверка вернула false
, ничего делать не нужно.
Добавьте в список несколько задач с разным приоритотетом. Работает!
Мы добавили всего пару строчек кода, а программа теперь проходит все тесты в испытании! Осталось выполнить бонусное задание.
Бонусное задание: очищать поле ввода после добавления задач. Сделаем это.
Чтобы очистить поле ввода, запишем в его свойство value
пустую строку.
Добавьте новую задачу в список и убедитесь, что поле ввода очистилось. Программа работает. Испытание пройдено!
Вернуться к испытанию