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