web-tech/labs/lab-06/other/Задание - Лабораторная работа 6.md

# Лабораторная работа №6. Проверка данных на стороне клиента. Уведомления

---

Добавьте блок с доступными для заказа вариантами ланча. Создайте скрипт, проверяющий состав ланча при отправке формы. Реализуйте показ уведомлений для пользователей.

## Порядок выполнения

Примерные макеты представлены ниже.  
* Макет блока с доступными для заказа вариантами
* Макет уведомления

[Полный макет](https://lms.mospolytech.ru/pluginfile.php/1314144/mod_assign/intro/mockupfull.png "Полный макет") страницы:

1. Создайте блок с доступными для заказа вариантами ланча.  
  
Структура блока:

- Заголовок
- Блок с вариантами (grid-контейнер, с 3 колонками на каждой строке)
	- Блок каждого варианта ланча (flex-контейнер)
		- Блок каждого блюда (flex-контейнер, направление главной оси - сверху вниз)
			- Изображение блюда
			- Подпись

Изображения с блюдами можно скачать [здесь](https://lms.mospolytech.ru/pluginfile.php/1314144/mod_assign/intro/icons.zip?time=1730060948701 "здесь").

Доступные для заказа варианты:

|1|2|3|4|5|
|---|---|---|---|---|
|Суп  <br>Главное блюдо  <br>Салат  <br>Напиток|Суп  <br>Главное блюдо  <br>Напиток|Суп  <br>Салат  <br>Напиток|Главное блюдо  <br>Салат  <br>Напиток|Главное блюдо  <br>Напиток|

В отдельном блоке необходимо разместить информацию о десертах. Их можно добавлять в любой вид ланча. Эту информацию нужно также отобразить на странице (поместить ниже подписи; шрифт меньше, чем у подписи на 2 пункта).

Измените свойства для изображений данного блока при наведении на них курсора. Используйте для этого transform с функциями трансформации translateY и scale.  
  
На видео продемонстрирована работа transform:

2. Создайте скрипт, который будет проверять все ли необходимые блюда добавил пользователь.

Скрипт должен запускаться, когда пользователь отправляет форму. Пользователь может добавлять в заказ произвольные блюда. В итоге у него должен получиться один из вариантов ланчей, описанных выше. Если перечень выбранных блюд не соответствует ни одному из возможных вариантов (комбо), у пользователя не должно быть возможности оформить заказ (форма не должна отправляться), и на странице должно быть выведено уведомление с информацией о недостающих блюдах.

Существует 5 видов уведомлений:

|Текст уведомления|Когда выводится|Изображение|
|---|---|---|
|«Ничего не выбрано. Выберите блюда для заказа»|Не добавлено ни одно блюдо|![Ничего не выбрано](https://lms.mospolytech.ru/pluginfile.php/1314144/mod_assign/intro/mockup3.png)|
|«Выберите напиток»|Выбраны все необходимые блюда, кроме напитка|![Выберите напиток](https://lms.mospolytech.ru/pluginfile.php/1314144/mod_assign/intro/mockup4.png)|
|«Выберите главное блюдо/салат/стартер»|Выбран суп, но не выбраны главное блюдо/салат/стартер|![Выберите главное блюдо/салат/стартер](https://lms.mospolytech.ru/pluginfile.php/1314144/mod_assign/intro/mockup5.png)|
|«Выберите суп или главное блюдо»|Выбран салат/стартер, но не выбраны суп/главное блюдо|![Выберите суп или главное блюдо](https://lms.mospolytech.ru/pluginfile.php/1314144/mod_assign/intro/mockup6.png)|
|«Выберите главное блюдо»|Выбран напиток/десерт|![Выберите главное блюдо](https://lms.mospolytech.ru/pluginfile.php/1314144/mod_assign/intro/mockup7.png)|

Уведомление должно создаваться динамически каждый раз, когда при попытке отправить форму скрипт обнаруживает, что какое-то блюдо не добавлено.  
  
Оно должно отображаться поверх остальных элементов на странице и не менять положение при прокрутке. Также, его нужно отцентровать по вертикали и горизонтали.  
При наведении на кнопку "Окей", изменяется цвет фона и текста кнопки.  
При нажатии на кнопку, уведомление исчезает и удаляется со страницы.
На видео продемонстрирована работа уведомления:

### Материалы для изучения

#### CSS
[transform [Doka]](https://doka.guide/css/transform/)
[translateX() [MDN]](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX)
[translateY() [MDN]](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY) 
[scale() [MDN]](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale)
[position [Doka]](https://doka.guide/css/position/)
[top, left, right, bottom [Doka]](https://doka.guide/css/top-left-right-bottom/)[](https://lms.mospolytech.ru/mod/assign/view.php?id=540007&forceview=1)
#### JS
[Отправка формы: событие и метод submit [JS.RU]](https://learn.javascript.ru/forms-submit)
[submit [Doka]](https://doka.guide/js/event-submit/)
[preventDefault() [Doka]](https://doka.guide/js/event-prevent-default/)
[preventDefault() [MDN]](https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault)
[Изменение документа [JS.RU]](https://learn.javascript.ru/modifying-document)
[document.createElement [MDN]](https://developer.mozilla.org/ru/docs/Web/API/Document/createElement)
[Создание элемента [JS.RU]](https://learn.javascript.ru/modifying-document#sozdanie-elementa
[Element.append() [MDN]](https://developer.mozilla.org/ru/docs/Web/API/Element/append)
[before() [MDN]](https://developer.mozilla.org/en-US/docs/Web/API/Element/before)
[after() [MDN]](https://developer.mozilla.org/en-US/docs/Web/API/Element/after)
[Методы вставки [JS.RU]](https://learn.javascript.ru/modifying-document#metody-vstavki)
[Element.remove() [MDN]](https://developer.mozilla.org/ru/docs/Web/API/Element/remove)
[Удаление узлов [JS.RU]](https://learn.javascript.ru/modifying-document#udalenie-uzlov)
#### Другое
[Юникод, внутреннее устройство строк](https://learn.javascript.ru/unicode)
[Emoji юникод](https://symbl.cc/ru/emoji/)