83 lines
7.6 KiB
Markdown
83 lines
7.6 KiB
Markdown
# Лабораторная работа №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/)
|