zvilka / order-coffee

order coffee task

В задании будем делать интерфейс заказа кофе.

Интерфейс работает так: есть форма выбора желаемого напитка, есть кнопка "Добавить напиток", которая добавляет на страницу еще одну такую же форму заказа. Под формой есть кнопка "Готово" после нажатия на которую, появляется модальное окно с информацией о заказе.

+1. Сделай так, чтобы при клике по кнопке "Добавить напиток" появлялась еще одна форма выбора напитка. Текст в заголовке "Напиток №{номер по порядку}" должен соответствовать номеру формы.

+2. Добавь в правом верхнем углу каждого fieldset с напитком кнопку — крестик удаления. При клике по ней этот напиток должен убираться с экрана. Эта кнопка не должна работать, если напиток единственный.

+3. Сделай, чтобы при нажатии на кнопку "Готово", появлялось модальное окно с текстом "Заказ принят!".

Напоминаю правила модального окна:

• у него должна быть фиксированная ширина (можешь выбрать сам, например, 500px — хороший размер),
• высота должна подстраиваться под контент,
• размещаться должно ровно посередине экрана,
• под окном и над контентом страницы должен располагаться оверлей,
• затемненный полупрозрачный фон,
• справа сверху в модальном окне должна быть кнопка закрытия с крестиком.

+4. Сделай, чтобы у модального окна был крестик для закрытия и при нажатии на него, модальное окно исчезало.

+5. Сделай так, чтобы в модальном окне выводился текст "Вы заказали {количество} напитков". В этом тексте должно быть подставленно актуальное количество напитков, которые выбрал пользователь. Сделай так, чтобы слово "напитков" склонялось в зависимости от количества: "1 напиток", "3 напитка", "5 напитков", "121 напиток".

+6. Сделай в модальном окне, ниже надписи про количество напитков, таблицу такого вида:

Напиток	Молоко	Дополнительно
Капучино	обычное
Какао	соевое	зефирки, шоколад

Данные для таблицы нужно получить из заполненной формы на странице.

7. * Добавь в формы выбора напитка textarea с возможностью написать любой текст. Поле должно быть подписано "И еще вот что"

Рядом с textarea должен выводиться текст, написанный в ней пользователем: на каждое изменение текста в поле, текст рядом тоже должен изменяться. Если в тексте введенном пользователем есть слова "срочно", "быстрее" / "побыстрее", "скорее" / "поскорее", "очень нужно", эти слова должны помещаться в тег b. Например, так:

Текст пользователя: Сделайте мне капучино побыстрее! Очень нужно!

Результат вывода: Сделайте мне капучино <b>побыстрее</b>! <b>Очень нужно</b>!

8. * Добавь в таблицу модального окна колонку "Пожелания", которую заполняй текстом из textarea.

9. * Сделай в модальном окне поле input с типом time и подписью "Выберите время заказа". Внизу модального окна добавь кнопку "Оформить". После нажатия на кнопку нужно проверить, если выбрано время раньше, чем текущее время, то покрасить границу поля ввода времени в красный, вывести alert с текстом "Мы не умеем перемещаться во времени. Выберите время позже, чем текущее". Если время введено правильно, то по нажатию на кнопку "Оформить" закрывай модалку.