# Лабораторная работа №4. Отображение и сортировка блюд, добавление в корзину

---
Отобразите блюда на странице с помощью JavaScript. Создайте скрипт, позволяющий выбрать блюдо и добавить его в раздел формы "Ваш заказ". Реализуйте подсчет итоговой стоимости. Отсортируйте блюда в алфавитном порядке.

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

Примерный макет раздела "Ваш заказ":

Изначально на странице не должно быть элементов с карточками блюд. Необходимо написать скрипт, который будет перебирать массив с блюдами, динамически создавать соответствующие им HTML-элементы, и при помощи DOM добавлять каждый из них в нужную секцию на странице.
1. Создайте массив объектов, в котором будут храниться все существующие блюда. У каждого объекта должны быть следующие свойства:
	- keyword (хранит название блюда на латинице, должно быть уникальным для каждого блюда)
	- name (название блюда)
	- price (цена)
	- category (категория на английском, например, "soup")
	- count (вес/объем)
	- image (путь к изображению, например "soups/gazpacho")

Пример объекта:
Массив должен храниться в отдельном js-файле.

2. Реализуйте отображение блюд на страницу с помощью JavaScript.  
Необходимо написать скрипт, который будет перебирать массив с блюдами и выводить каждое из них в нужную секцию. Секции должны выглядеть также, как при статичном выводе из прошлых лабораторных.
* У каждого блока с блюдом должен быть data-атрибут "data-dish", в котором будет храниться название блюда на латинице.

Скрипт отображения должен храниться в отдельном js-файле.

3. Создайте скрипт, позволяющий выбрать блюдо и добавить его в форму "Сделать заказ".

- При клике на карточку с блюдом, его название и цена должны появляться в разделе формы "Ваш заказ". Блюдо должно отображаться в своей категории.
    Используйте data-атрибут, чтобы найти блюдо в массиве.
    Например, пользователь выбрал суп "Гаспачо". Вот как должен выглядеть раздел "Ваш заказ"
- Если затем пользователь выбрал другой суп, он должен отобразиться вместо "Гаспачо"
- Если блюдо из одной категории добавлено, а из другой нет, в пустой категории должно быть выведено сообщение: "Блюдо не выбрано" (или "Напиток не выбран" для раздела с напитками).  
    Например, пользователь выбрал суп, но не выбрал основное блюдо и напиток
- Если еще ничего не было выбрано, в блоке должен отображаться текст "Ничего не выбрано" (названия категорий скрыты)
-  Вот как выглядит блок, если были выбраны блюда из каждой категории

4. Реализуйте подсчет итоговой стоимости для всех выбранных позиций меню.

- После блоков с выбранными блюдами должен располагаться блок "Стоимость заказа".  
    В блоке отображается итоговая стоимость всех блюд. Например, если был выбран только напиток, отобразится его цена
- Так выглядит блок, если выбраны блюда из каждой категории
- Если блюда не были выбраны, блок "Стоимость заказа" скрыт также, как и блоки с категориями.

5. Отсортируйте блюда каждой категории в алфавитном порядке.

- Используйте метод sort() перед отображением блюд на страницу. Блюда должны быть отсортированы в алфавитном порядке.

Данные о выбранных блюдах можно не отправлять при отправке формы (остальные данные формы должны отправляться).

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

#### HTML
[Атрибуты data-* [Doka]](https://doka.guide/html/data-attributes/)  
[Скрытые поля [MDN]](https://developer.mozilla.org/ru/docs/Web/HTML/Element/input/hidden)  
#### JS
[Современный учебник JavaScript [JS.RU]](https://learn.javascript.ru/)
[JavaScript [MDN]](https://developer.mozilla.org/ru/docs/Web/JavaScript)
[JavaScript [Doka]](https://doka.guide/js/)
[Переменные const, let и var [Doka]](https://doka.guide/js/var-let/)
[if...else [Doka]](https://doka.guide/js/if-else/)
[forEach() [Doka]](https://doka.guide/js/array-foreach/)
[Число [Doka]](https://doka.guide/js/number/)
[Строка [Doka]](https://doka.guide/js/string/)
[Булев тип [Doka]](https://doka.guide/js/boolean/)
[undefined [Doka]](https://doka.guide/js/undefined/)
[console.log() [Doka]](https://doka.guide/js/console-log/)
[textContent [Doka]](https://doka.guide/js/element-textcontent/)
[Массив [Doka]](https://doka.guide/js/arrays/)
[Объект [Doka]](https://doka.guide/js/object/)
[Введение в DOM [MDN]](https://developer.mozilla.org/ru/docs/Web/API/Document_Object_Model/Introduction)
[DOM [Doka]](https://doka.guide/js/dom/)
[Using the Document Object Model [MDN]](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model)
[querySelector() [Doka]](https://doka.guide/js/query-selector/)
[querySelectorAll() [Doka]](https://doka.guide/js/query-selector-all/)
[dataset [Doka]](https://doka.guide/js/element-dataset/)
[addEventListener() [Doka]](https://doka.guide/js/element-addeventlistener/)
[HTMLElement: dataset property [MDN]](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset)
[Style display Property [W3Schools]](https://www.w3schools.com/jsref/prop_style_display.asp)
[Element.insertAdjacentHTML() [MDN]](https://developer.mozilla.org/ru/docs/Web/API/Element/insertAdjacentHTML)
[Браузерное окружение, спецификации [JS.RU]](https://learn.javascript.ru/browser-environment)
[sort() [Doka]](https://doka.guide/js/array-sort/)