DeevEV/web-tech
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
web-tech/labs/lab-04/other/Задание - Лабораторная работа 4.md
Egor Deev 02bab4c8e3
LAB-04
2025-11-19 11:27:06 +03:00

7.6 KiB
Raw Blame History

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

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

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

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

Изначально на странице не должно быть элементов с карточками блюд. Необходимо написать скрипт, который будет перебирать массив с блюдами, динамически создавать соответствующие им HTML-элементы, и при помощи DOM добавлять каждый из них в нужную секцию на странице.

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

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

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

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

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

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

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

HTML

Атрибуты data-* [Doka]
Скрытые поля [MDN]

JS

Современный учебник JavaScript [JS.RU] JavaScript [MDN] JavaScript [Doka] Переменные const, let и var [Doka] if...else [Doka] forEach() [Doka] Число [Doka] Строка [Doka] Булев тип [Doka] undefined [Doka] console.log() [Doka] textContent [Doka] Массив [Doka] Объект [Doka] Введение в DOM [MDN] DOM [Doka] Using the Document Object Model [MDN] querySelector() [Doka] querySelectorAll() [Doka] dataset [Doka] addEventListener() [Doka] HTMLElement: dataset property [MDN] Style display Property [W3Schools] Element.insertAdjacentHTML() [MDN] Браузерное окружение, спецификации [JS.RU] sort() [Doka]