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

Испытание: Список задач

Ах, мои усики! Ах, мои ушки! Столько дел, столько дел!..

А кстати, сколько — столько? Без хорошего списка за всем очень трудно уследить. А ещё труднее — заканчивать начатое. Кекс взялся за создание автоматизированного списка задач, но бросил. Будет неплохо, если мы доведём до ума его программу.

Список задач уже находится на странице. Чтобы создать новую задачу, пользователь должен ввести текст этой задачи в поле ввода. Задачи имеют разный приоритет, его можно выбрать, кликнув по кнопке-переключателю. Если выбран высокий приоритет, на кнопке написано «Важная задача», а если приоритет обычный, написано «Обычная задача». Нажатие на кнопку «Добавить в список» добавит новую задачу в конец списка задач.

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

В личных записках Кекса нашлось описание, как должна работать программа:

  1. Каждая задача в списке — это элемент li. При отправке формы (переменная form) новая задача добавляется в конец списка (переменная list).
  2. Текст задачи берётся из поля ввода (переменная input).
  3. Если у переключателя приоритета (переменная priority) есть класс is-important, то новой задаче также добавляется класс is-important.
  4. Бонус: после того, как задача добавится в список, поле ввода можно очистить. Но можно не очищать. Подходят оба варианта.

Без JavaScript будущему разработчику никуда. Записывайтесь на профессиональный курс по JavaScript первого уровня, проходящий c 18 июня по 19 августа 2024. Только 5 дней цена 24 900 ₽30 900 ₽

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

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

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

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

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

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