105 lines
No EOL
7.5 KiB
Markdown
105 lines
No EOL
7.5 KiB
Markdown
# Лабораторная работа №5. Добавление категорий и фильтров
|
||
|
||
---
|
||
|
||
Добавьте новые блюда и категории. Создайте фильтры для каждой категории.
|
||
|
||
## Порядок выполнения
|
||
|
||
Примерные макеты разделов:
|
||
* Раздел "Выберите суп"
|
||
* Раздел "Выберите главное блюдо"
|
||
* Раздел "Выберите салат или стартер"
|
||
* Раздел "Выберите напиток"
|
||
* Раздел "Выберите десерт"
|
||
* Раздел "Сделать заказ"
|
||
|
||
[Полный макет](https://lms.mospolytech.ru/pluginfile.php/1314142/mod_assign/intro/mockupfull.png "Полный макет") страницы:
|
||
|
||
1. Для каждой категории блюд добавьте блок с фильтрами (фильтры - это кнопки).
|
||
|
||
Фильтры для категорий:
|
||
|
||
|Категория|Фильтры|
|
||
|---|---|
|
||
|Суп|рыбный <br>мясной <br>вегетарианский|
|
||
|Главное блюдо|рыбное <br>мясное <br>вегетарианское|
|
||
|Напиток|холодный <br>горячий|
|
||
|
||
У каждой кнопки должен быть data-атрибут - data-kind. Значение data-kind - это название фильтра на английском. Например, для рыбных супов data-kind может быть со значением "fish".
|
||
|
||
2. Для каждого объекта с блюдом добавьте новое свойство kind. Оно будет хранить значение для фильтрации. Значение kind должно соответствовать значению data-kind одного из фильтров.
|
||
|
||
Например, если data-kind для вегетарианских супов - "veg", свойство kind супа "Гаспачо" тоже будет "veg".
|
||
|
||
3. Добавьте новые категории блюд на страницу.
|
||
|
||
Добавьте еще 2 категории блюд:
|
||
- Салаты и стартеры
|
||
- Десерты
|
||
|
||
Структура блоков с новыми категориями должна быть такой же как у остальных категорий. Сейчас новые блоки не содержат блюд, вы будете заполнять их в следующем шаге.
|
||
|
||
В данные категории также необходимо добавить блок с фильтрами. Фильтры:
|
||
|
||
|Категория|Фильтры|
|
||
|---|---|
|
||
|Салат или стартер|рыбный <br>мясной <br>вегетарианский|
|
||
|Десерты|маленькая порция <br>средняя порция <br>большая порция|
|
||
|
||
4. Добавьте новые блюда.
|
||
|
||
Теперь необходимо добавить новые блюда во все существующие категории. В каждой категории должно быть по 6 блюд.
|
||
|
||
Добавьте в массив все недостающие блюда. Не забудьте указать все свойства, включая kind.
|
||
|
||
В каждом разделе должны быть представлены блюда всех возможных категорий для данного раздела. Ниже представлена таблица с указанием количества блюд каждой категории для соответствующих им разделов меню:
|
||
|
||
| Блюдо | Категория | Количество |
|
||
| ----------------- | ---------------- | ---------- |
|
||
| Суп | рыбный | 2 |
|
||
| Суп | мясной | 2 |
|
||
| Суп | вегетарианский | 2 |
|
||
| Главное блюдо | рыбное | 2 |
|
||
| Главное блюдо | мясное | 2 |
|
||
| Главное блюдо | вегетарианское | 2 |
|
||
| Салат или стартер | рыбный | 1 |
|
||
| Салат или стартер | мясной | 1 |
|
||
| Салат или стартер | вегетарианский | 4 |
|
||
| Напиток | холодный | 3 |
|
||
| Напиток | горячий | 3 |
|
||
| Десерт | маленькая порция | 3 |
|
||
| Десерт | средняя порция | 2 |
|
||
| Десерт | большая порция | 1 |
|
||
|
||
То есть, если сейчас в разделе с главными блюдами у вас добавлено 2 рыбных и 1 мясное блюдо, вам нужно добавить еще 1 мясное и 2 вегетарианских.
|
||
|
||
Изображения с блюдами можно скачать по [ссылке](https://lms.mospolytech.ru/pluginfile.php/1314142/mod_assign/intro/menu.zip?time=1729893070876 "ссылке").
|
||
|
||
5. Реализуйте отображение всех новых блюд на страницу с помощью JavaScript. Проверьте, что скрипт работает для всех категорий.
|
||
|
||
6. Создайте скрипт, с помощью которого можно фильтровать отображаемые в каждой категории блюда.
|
||
|
||
- При клике на ссылку с фильтром, в блоке отображаются только блюда с соответствующим значением kind. Например, пользователь выбрал фильтр "мясное" в категории с главными блюдами.
|
||
- Если затем пользователь выбрал другой фильтр, блюда должны измениться. Например, поменяем фильтр на "рыбное"
|
||
- При клике на ссылку, ей добавляется класс "active" и меняется стиль ее отображения.
|
||
- Если кликнуть по выбранному фильтру повторно, класс "active" удаляется, а в блоке снова отображаются все блюда.
|
||
- Если ни один из фильтров не был выбран, в блоке отображаются все блюда.
|
||
|
||
Функции из предыдущей лабораторной должны работать корректно, в том числе после фильтрации блюд.
|
||
### Материалы для изучения
|
||
|
||
#### HTML
|
||
[Атрибуты data-* [Doka]](https://doka.guide/html/data-attributes/)
|
||
#### JS
|
||
[Функция [Doka]](https://doka.guide/js/function/)
|
||
[Функции [MDN]](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions)
|
||
[push() [Doka]](https://doka.guide/js/array-push/)
|
||
[pop() [Doka]](https://doka.guide/js/array-pop/)
|
||
[unshift() [Doka]](https://doka.guide/js/array-unshift/)
|
||
[shift() [Doka]](https://doka.guide/js/array-shift/)
|
||
[slice() [Doka]](https://doka.guide/js/array-slice/)
|
||
[splice() [Doka]](https://doka.guide/js/array-splice/)
|
||
[includes() [Doka]](https://doka.guide/js/includes/)
|
||
[classList [Doka]](https://doka.guide/js/element-classlist/)
|
||
[Области видимости [Doka]](https://doka.guide/js/closures/) |