В задании будем делать интерфейс заказа кофе.
Интерфейс работает так: есть форма выбора желаемого напитка, есть кнопка "Добавить напиток"
, которая добавляет на страницу еще одну такую же форму заказа. Под формой есть кнопка "Готово"
после нажатия на которую, появляется модальное окно с информацией о заказе.
-
Сделай так, чтобы при клике по кнопке
"Добавить напиток"
появлялась еще одна форма выбора напитка. Текст в заголовке"Напиток №{номер по порядку}"
должен соответствовать номеру формы. -
Добавь в правом верхнем углу каждого
fieldset
с напитком кнопку — крестик удаления. При клике по ней этот напиток должен убираться с экрана. Эта кнопка не должна работать, если напиток единственный. -
Сделай, чтобы при нажатии на кнопку
"Готово"
, появлялось модальное окно с текстом"Заказ принят!"
.
Напоминаю правила модального окна:
- у него должна быть фиксированная ширина (можешь выбрать сам, например,
500px
— хороший размер), - высота должна подстраиваться под контент,
- размещаться должно ровно посередине экрана,
- под окном и над контентом страницы должен располагаться оверлей,
- затемненный полупрозрачный фон,
- справа сверху в модальном окне должна быть кнопка закрытия с крестиком.
-
Сделай, чтобы у модального окна был крестик для закрытия и при нажатии на него, модальное окно исчезало.
-
Сделай так, чтобы в модальном окне выводился текст
"Вы заказали {количество} напитков"
. В этом тексте должно быть подставленно актуальное количество напитков, которые выбрал пользователь. Сделай так, чтобы слово"напитков"
склонялось в зависимости от количества:"1 напиток"
,"3 напитка"
,"5 напитков"
,"121 напиток"
. -
Сделай в модальном окне, ниже надписи про количество напитков, таблицу такого вида:
Напиток | Молоко | Дополнительно |
---|---|---|
Капучино | обычное | |
Какао | соевое | зефирки, шоколад |
Данные для таблицы нужно получить из заполненной формы на странице.
- * Добавь в формы выбора напитка
textarea
с возможностью написать любой текст. Поле должно быть подписано"И еще вот что"
Рядом с textarea
должен выводиться текст, написанный в ней пользователем: на каждое изменение текста в поле, текст рядом тоже должен изменяться. Если в тексте введенном пользователем есть слова "срочно"
, "быстрее"
/ "побыстрее"
, "скорее"
/ "поскорее"
, "очень нужно"
, эти слова должны помещаться в тег b
. Например, так:
Текст пользователя: Сделайте мне капучино побыстрее! Очень нужно!
Результат вывода: Сделайте мне капучино <b>побыстрее</b>! <b>Очень нужно</b>!
-
* Добавь в таблицу модального окна колонку
"Пожелания"
, которую заполняй текстом изtextarea
. -
* Сделай в модальном окне поле
input
с типомtime
и подписью"Выберите время заказа"
. Внизу модального окна добавь кнопку"Оформить"
. После нажатия на кнопку нужно проверить, если выбрано время раньше, чем текущее время, то покрасить границу поля ввода времени в красный, вывестиalert
с текстом"Мы не умеем перемещаться во времени. Выберите время позже, чем текущее"
. Если время введено правильно, то по нажатию на кнопку"Оформить"
закрывай модалку.