diff --git a/labs/lab-05/dishes.js b/labs/lab-05/dishes.js new file mode 100644 index 0000000..efa1ffe --- /dev/null +++ b/labs/lab-05/dishes.js @@ -0,0 +1,353 @@ +const dishes = [ + { + keyword: "mushroom-soup", + name: "Грибной крем-суп", + price: 280, + category: "soup", + count: "300 мл", + image: "img/soup/mushroom-soup.jpg", + kind: "veg" + }, + { + keyword: "beet-soup", + name: "Традиционный борщ", + price: 240, + category: "soup", + count: "350 мл", + image: "img/soup/beet-soup.jpg", + kind: "meat" + }, + { + keyword: "chicken-noodle-soup", + name: "Куриный бульон с лапшой", + price: 220, + category: "soup", + count: "350 мл", + image: "img/soup/chicken-noodle-soup.jpg", + kind: "meat" + }, + { + keyword: "minestrone-soup", + name: "Итальянский суп минестроне", + price: 260, + category: "soup", + count: "350 мл", + image: "img/soup/minestrone-soup.jpg", + kind: "veg" + }, + { + keyword: "tomato-soup", + name: "Томатный крем-суп", + price: 250, + category: "soup", + count: "300 мл", + image: "img/soup/tomato-soup.jpg", + kind: "veg" + }, + { + keyword: "pumpkin-soup", + name: "Тыквенный суп с имбирем", + price: 270, + category: "soup", + count: "300 мл", + image: "img/soup/pumpkin-soup.jpg", + kind: "veg" + }, + { + keyword: "fish-soup", + name: "Уха из лосося", + price: 320, + category: "soup", + count: "350 мл", + image: "img/soup/fish-soup.jpg", + kind: "fish" + }, + { + keyword: "seafood-soup", + name: "Суп том-ям с морепродуктами", + price: 340, + category: "soup", + count: "350 мл", + image: "img/soup/seafood-soup.jpg", + kind: "fish" + }, + { + keyword: "french-onion-soup", + name: "Французский луковый суп", + price: 300, + category: "soup", + count: "350 мл", + image: "img/soup/french-onion-soup.jpg", + kind: "veg" + }, + { + keyword: "vegan-bowl-chickpeas", + name: "Веганский боул с нутом", + price: 390, + category: "main-course", + count: "350 г", + image: "img/main-dishes/vegan-bowl-chickpeas.jpg", + kind: "veg" + }, + { + keyword: "grilled-chicken-vegetables", + name: "Куриная грудка с овощами гриль", + price: 450, + category: "main-course", + count: "350 г", + image: "img/main-dishes/grilled-chicken-vegetables.jpg", + kind: "meat" + }, + { + keyword: "salmon-quinoa-avocado", + name: "Лосось с киноа и авокадо", + price: 620, + category: "main-course", + count: "380 г", + image: "img/main-dishes/salmon-quinoa-avocado.jpg", + kind: "fish" + }, + { + keyword: "seafood-pasta", + name: "Паста с морепродуктами", + price: 550, + category: "main-course", + count: "330 г", + image: "img/main-dishes/seafood-pasta.jpg", + kind: "fish" + }, + { + keyword: "teriyaki-chicken-noodles", + name: "Рисовая лапша с курицей терияки", + price: 420, + category: "main-course", + count: "340 г", + image: "img/main-dishes/teriyaki-chicken-noodles.jpg", + kind: "meat" + }, + { + keyword: "beef-salad", + name: "Теплый салат с говядиной", + price: 490, + category: "main-course", + count: "320 г", + image: "img/main-dishes/beef-salad.jpg", + kind: "meat" + }, + { + keyword: "vegetable-stir-fry", + name: "Овощное рагу с тофу", + price: 380, + category: "main-course", + count: "350 г", + image: "img/main-dishes/vegetable-stir-fry.jpg", + kind: "veg" + }, + { + keyword: "duck-orange-sauce", + name: "Утка в апельсиновом соусе", + price: 580, + category: "main-course", + count: "360 г", + image: "img/main-dishes/duck-orange-sauce.jpg", + kind: "meat" + }, + { + keyword: "mushroom-risotto", + name: "Ризотто с белыми грибами", + price: 410, + category: "main-course", + count: "340 г", + image: "img/main-dishes/mushroom-risotto.jpg", + kind: "veg" + }, + { + keyword: "berry-juice", + name: "Ягодный морс", + price: 120, + category: "drink", + count: "300 мл", + image: "img/drinks/berry-juice.jpg", + kind: "cold" + }, + { + keyword: "water", + name: "Минеральная вода", + price: 80, + category: "drink", + count: "500 мл", + image: "img/drinks/water.jpg", + kind: "cold" + }, + { + keyword: "spinach-smoothie", + name: "Зеленый смузи с шпинатом", + price: 180, + category: "drink", + count: "350 мл", + image: "img/drinks/spinach-smoothie.jpg", + kind: "cold" + }, + { + keyword: "ginger-lemonade", + name: "Имбирный лимонад", + price: 140, + category: "drink", + count: "300 мл", + image: "img/drinks/ginger-lemonade.jpg", + kind: "cold" + }, + { + keyword: "mango-smoothie", + name: "Смузи манго-маракуйя", + price: 170, + category: "drink", + count: "350 мл", + image: "img/drinks/mango-smoothie.jpg", + kind: "cold" + }, + { + keyword: "orange-juice", + name: "Свежевыжатый апельсиновый сок", + price: 150, + category: "drink", + count: "300 мл", + image: "img/drinks/orange-juice.jpg", + kind: "cold" + }, + { + keyword: "cappuccino", + name: "Капучино", + price: 150, + category: "drink", + count: "300 мл", + image: "img/drinks/cappuccino.jpg", + kind: "hot" + }, + { + keyword: "green-tea", + name: "Зеленый чай", + price: 100, + category: "drink", + count: "400 мл", + image: "img/drinks/green-tea.jpg", + kind: "hot" + }, + { + keyword: "hot-chocolate", + name: "Горячий шоколад", + price: 160, + category: "drink", + count: "300 мл", + image: "img/drinks/hot-chocolate.jpg", + kind: "hot" + }, + { + keyword: "shrimp-salad", + name: "Салат с креветками и авокадо", + price: 380, + category: "salad", + count: "250 г", + image: "img/salads/shrimp-salad.jpg", + kind: "fish" + }, + { + keyword: "caesar-salad", + name: "Цезарь с курицей", + price: 320, + category: "salad", + count: "280 г", + image: "img/salads/caesar-salad.jpg", + kind: "meat" + }, + { + keyword: "greek-salad", + name: "Греческий салат", + price: 280, + category: "salad", + count: "260 г", + image: "img/salads/greek-salad.jpg", + kind: "veg" + }, + { + keyword: "caprese-salad", + name: "Капрезе с моцареллой", + price: 290, + category: "salad", + count: "240 г", + image: "img/salads/caprese-salad.jpg", + kind: "veg" + }, + { + keyword: "quinoa-salad", + name: "Салат с киноа и овощами", + price: 310, + category: "salad", + count: "270 г", + image: "img/salads/quinoa-salad.jpg", + kind: "veg" + }, + { + keyword: "beetroot-salad", + name: "Салат со свеклой и орехами", + price: 260, + category: "salad", + count: "250 г", + image: "img/salads/beetroot-salad.jpg", + kind: "veg" + }, + { + keyword: "chocolate-mousse", + name: "Шоколадный мусс", + price: 180, + category: "dessert", + count: "100 г", + image: "img/desserts/chocolate-mousse.jpg", + kind: "small" + }, + { + keyword: "panna-cotta", + name: "Панна-котта с ягодным соусом", + price: 200, + category: "dessert", + count: "120 г", + image: "img/desserts/panna-cotta.jpg", + kind: "small" + }, + { + keyword: "lemon-tart", + name: "Лимонный тарт", + price: 190, + category: "dessert", + count: "110 г", + image: "img/desserts/lemon-tart.jpg", + kind: "small" + }, + { + keyword: "cheesecake", + name: "Чизкейк Нью-Йорк", + price: 280, + category: "dessert", + count: "150 г", + image: "img/desserts/cheesecake.jpg", + kind: "medium" + }, + { + keyword: "tiramisu", + name: "Тирамису классический", + price: 290, + category: "dessert", + count: "160 г", + image: "img/desserts/tiramisu.jpg", + kind: "medium" + }, + { + keyword: "chocolate-cake", + name: "Шоколадный торт", + price: 350, + category: "dessert", + count: "200 г", + image: "img/desserts/chocolate-cake.jpg", + kind: "large" + } +]; \ No newline at end of file diff --git a/labs/lab-05/img/desserts/cheesecake.jpg b/labs/lab-05/img/desserts/cheesecake.jpg new file mode 100644 index 0000000..44ad609 Binary files /dev/null and b/labs/lab-05/img/desserts/cheesecake.jpg differ diff --git a/labs/lab-05/img/desserts/chocolate-cake.jpg b/labs/lab-05/img/desserts/chocolate-cake.jpg new file mode 100644 index 0000000..acde5bf Binary files /dev/null and b/labs/lab-05/img/desserts/chocolate-cake.jpg differ diff --git a/labs/lab-05/img/desserts/chocolate-mousse.jpg b/labs/lab-05/img/desserts/chocolate-mousse.jpg new file mode 100644 index 0000000..529bbcc Binary files /dev/null and b/labs/lab-05/img/desserts/chocolate-mousse.jpg differ diff --git a/labs/lab-05/img/desserts/lemon-tart.jpg b/labs/lab-05/img/desserts/lemon-tart.jpg new file mode 100644 index 0000000..04ced89 Binary files /dev/null and b/labs/lab-05/img/desserts/lemon-tart.jpg differ diff --git a/labs/lab-05/img/desserts/panna-cotta.jpg b/labs/lab-05/img/desserts/panna-cotta.jpg new file mode 100644 index 0000000..055f771 Binary files /dev/null and b/labs/lab-05/img/desserts/panna-cotta.jpg differ diff --git a/labs/lab-05/img/desserts/tiramisu.jpg b/labs/lab-05/img/desserts/tiramisu.jpg new file mode 100644 index 0000000..c5880aa Binary files /dev/null and b/labs/lab-05/img/desserts/tiramisu.jpg differ diff --git a/labs/lab-05/img/drinks/berry-juice.jpg b/labs/lab-05/img/drinks/berry-juice.jpg new file mode 100644 index 0000000..fd427c1 Binary files /dev/null and b/labs/lab-05/img/drinks/berry-juice.jpg differ diff --git a/labs/lab-05/img/drinks/cappuccino.jpg b/labs/lab-05/img/drinks/cappuccino.jpg new file mode 100644 index 0000000..af51c9f Binary files /dev/null and b/labs/lab-05/img/drinks/cappuccino.jpg differ diff --git a/labs/lab-05/img/drinks/ginger-lemonade.jpg b/labs/lab-05/img/drinks/ginger-lemonade.jpg new file mode 100644 index 0000000..a829370 Binary files /dev/null and b/labs/lab-05/img/drinks/ginger-lemonade.jpg differ diff --git a/labs/lab-05/img/drinks/green-tea.jpg b/labs/lab-05/img/drinks/green-tea.jpg new file mode 100644 index 0000000..cb9e410 Binary files /dev/null and b/labs/lab-05/img/drinks/green-tea.jpg differ diff --git a/labs/lab-05/img/drinks/hot-chocolate.jpg b/labs/lab-05/img/drinks/hot-chocolate.jpg new file mode 100644 index 0000000..7813ca3 Binary files /dev/null and b/labs/lab-05/img/drinks/hot-chocolate.jpg differ diff --git a/labs/lab-05/img/drinks/mango-smoothie.jpg b/labs/lab-05/img/drinks/mango-smoothie.jpg new file mode 100644 index 0000000..3d88b63 Binary files /dev/null and b/labs/lab-05/img/drinks/mango-smoothie.jpg differ diff --git a/labs/lab-05/img/drinks/orange-juice.jpg b/labs/lab-05/img/drinks/orange-juice.jpg new file mode 100644 index 0000000..c26c39e Binary files /dev/null and b/labs/lab-05/img/drinks/orange-juice.jpg differ diff --git a/labs/lab-05/img/drinks/spinach-smoothie.jpg b/labs/lab-05/img/drinks/spinach-smoothie.jpg new file mode 100644 index 0000000..77daa21 Binary files /dev/null and b/labs/lab-05/img/drinks/spinach-smoothie.jpg differ diff --git a/labs/lab-05/img/drinks/water.jpg b/labs/lab-05/img/drinks/water.jpg new file mode 100644 index 0000000..b8fa32e Binary files /dev/null and b/labs/lab-05/img/drinks/water.jpg differ diff --git a/labs/lab-05/img/main-dishes/beef-salad.jpg b/labs/lab-05/img/main-dishes/beef-salad.jpg new file mode 100644 index 0000000..cb315dd Binary files /dev/null and b/labs/lab-05/img/main-dishes/beef-salad.jpg differ diff --git a/labs/lab-05/img/main-dishes/duck-orange-sauce.jpg b/labs/lab-05/img/main-dishes/duck-orange-sauce.jpg new file mode 100644 index 0000000..df9dfc2 Binary files /dev/null and b/labs/lab-05/img/main-dishes/duck-orange-sauce.jpg differ diff --git a/labs/lab-05/img/main-dishes/grilled-chicken-vegetables.jpg b/labs/lab-05/img/main-dishes/grilled-chicken-vegetables.jpg new file mode 100644 index 0000000..8335a13 Binary files /dev/null and b/labs/lab-05/img/main-dishes/grilled-chicken-vegetables.jpg differ diff --git a/labs/lab-05/img/main-dishes/mushroom-risotto.jpg b/labs/lab-05/img/main-dishes/mushroom-risotto.jpg new file mode 100644 index 0000000..85e1392 Binary files /dev/null and b/labs/lab-05/img/main-dishes/mushroom-risotto.jpg differ diff --git a/labs/lab-05/img/main-dishes/salmon-quinoa-avocado.jpg b/labs/lab-05/img/main-dishes/salmon-quinoa-avocado.jpg new file mode 100644 index 0000000..a912374 Binary files /dev/null and b/labs/lab-05/img/main-dishes/salmon-quinoa-avocado.jpg differ diff --git a/labs/lab-05/img/main-dishes/seafood-pasta.jpg b/labs/lab-05/img/main-dishes/seafood-pasta.jpg new file mode 100644 index 0000000..b127a11 Binary files /dev/null and b/labs/lab-05/img/main-dishes/seafood-pasta.jpg differ diff --git a/labs/lab-05/img/main-dishes/teriyaki-chicken-noodles.jpg b/labs/lab-05/img/main-dishes/teriyaki-chicken-noodles.jpg new file mode 100644 index 0000000..cd6d36c Binary files /dev/null and b/labs/lab-05/img/main-dishes/teriyaki-chicken-noodles.jpg differ diff --git a/labs/lab-05/img/main-dishes/vegan-bowl-chickpeas.jpg b/labs/lab-05/img/main-dishes/vegan-bowl-chickpeas.jpg new file mode 100644 index 0000000..65c00ab Binary files /dev/null and b/labs/lab-05/img/main-dishes/vegan-bowl-chickpeas.jpg differ diff --git a/labs/lab-05/img/main-dishes/vegetable-stir-fry.jpg b/labs/lab-05/img/main-dishes/vegetable-stir-fry.jpg new file mode 100644 index 0000000..0f106fa Binary files /dev/null and b/labs/lab-05/img/main-dishes/vegetable-stir-fry.jpg differ diff --git a/labs/lab-05/img/main.jpg b/labs/lab-05/img/main.jpg new file mode 100644 index 0000000..f9f6558 Binary files /dev/null and b/labs/lab-05/img/main.jpg differ diff --git a/labs/lab-05/img/salads/beetroot-salad.jpg b/labs/lab-05/img/salads/beetroot-salad.jpg new file mode 100644 index 0000000..3c2f862 Binary files /dev/null and b/labs/lab-05/img/salads/beetroot-salad.jpg differ diff --git a/labs/lab-05/img/salads/caesar-salad.jpg b/labs/lab-05/img/salads/caesar-salad.jpg new file mode 100644 index 0000000..b0093df Binary files /dev/null and b/labs/lab-05/img/salads/caesar-salad.jpg differ diff --git a/labs/lab-05/img/salads/caprese-salad.jpg b/labs/lab-05/img/salads/caprese-salad.jpg new file mode 100644 index 0000000..7c09b80 Binary files /dev/null and b/labs/lab-05/img/salads/caprese-salad.jpg differ diff --git a/labs/lab-05/img/salads/greek-salad.jpg b/labs/lab-05/img/salads/greek-salad.jpg new file mode 100644 index 0000000..e1790c5 Binary files /dev/null and b/labs/lab-05/img/salads/greek-salad.jpg differ diff --git a/labs/lab-05/img/salads/quinoa-salad.jpg b/labs/lab-05/img/salads/quinoa-salad.jpg new file mode 100644 index 0000000..8ad87d4 Binary files /dev/null and b/labs/lab-05/img/salads/quinoa-salad.jpg differ diff --git a/labs/lab-05/img/salads/shrimp-salad.jpg b/labs/lab-05/img/salads/shrimp-salad.jpg new file mode 100644 index 0000000..99abf15 Binary files /dev/null and b/labs/lab-05/img/salads/shrimp-salad.jpg differ diff --git a/labs/lab-05/img/soup/beet-soup.jpg b/labs/lab-05/img/soup/beet-soup.jpg new file mode 100644 index 0000000..ea428f4 Binary files /dev/null and b/labs/lab-05/img/soup/beet-soup.jpg differ diff --git a/labs/lab-05/img/soup/chicken-noodle-soup.jpg b/labs/lab-05/img/soup/chicken-noodle-soup.jpg new file mode 100644 index 0000000..aac43a8 Binary files /dev/null and b/labs/lab-05/img/soup/chicken-noodle-soup.jpg differ diff --git a/labs/lab-05/img/soup/fish-soup.jpg b/labs/lab-05/img/soup/fish-soup.jpg new file mode 100644 index 0000000..cc0d2bc Binary files /dev/null and b/labs/lab-05/img/soup/fish-soup.jpg differ diff --git a/labs/lab-05/img/soup/french-onion-soup.jpg b/labs/lab-05/img/soup/french-onion-soup.jpg new file mode 100644 index 0000000..cd26ae7 Binary files /dev/null and b/labs/lab-05/img/soup/french-onion-soup.jpg differ diff --git a/labs/lab-05/img/soup/minestrone-soup.jpg b/labs/lab-05/img/soup/minestrone-soup.jpg new file mode 100644 index 0000000..a5f8be8 Binary files /dev/null and b/labs/lab-05/img/soup/minestrone-soup.jpg differ diff --git a/labs/lab-05/img/soup/mushroom-soup.jpg b/labs/lab-05/img/soup/mushroom-soup.jpg new file mode 100644 index 0000000..44ce3f4 Binary files /dev/null and b/labs/lab-05/img/soup/mushroom-soup.jpg differ diff --git a/labs/lab-05/img/soup/pumpkin-soup.jpg b/labs/lab-05/img/soup/pumpkin-soup.jpg new file mode 100644 index 0000000..c4df13d Binary files /dev/null and b/labs/lab-05/img/soup/pumpkin-soup.jpg differ diff --git a/labs/lab-05/img/soup/seafood-soup.jpg b/labs/lab-05/img/soup/seafood-soup.jpg new file mode 100644 index 0000000..47162ba Binary files /dev/null and b/labs/lab-05/img/soup/seafood-soup.jpg differ diff --git a/labs/lab-05/img/soup/tomato-soup.jpg b/labs/lab-05/img/soup/tomato-soup.jpg new file mode 100644 index 0000000..a50d0d0 Binary files /dev/null and b/labs/lab-05/img/soup/tomato-soup.jpg differ diff --git a/labs/lab-05/index.html b/labs/lab-05/index.html new file mode 100644 index 0000000..a608c75 --- /dev/null +++ b/labs/lab-05/index.html @@ -0,0 +1,101 @@ + + + + + + + ЭкоЛанч - Доставка здоровых бизнес-ланчей в Москве + + + + + + +
+

ЭкоЛанч

+ +
+ +
+
+

О компании ЭкоЛанч

+ Здоровая еда в контейнерах +

ЭкоЛанч - это современная компания по доставке здоровых бизнес-ланчей в офисы Москвы. Наша миссия - сделать правильное питание доступным для занятых людей, которые ценят свое время и здоровье.

+

Мы используем только свежие продукты от проверенных поставщиков, а наши повара готовят блюда каждое утро. Все ланчи упакованы в экологичную биоразлагаемую упаковку, потому что мы заботимся не только о вашем здоровье, но и о здоровье нашей планеты.

+
+ +
+

Наши преимущества

+ +
+ +
+

Самые популярные блюда

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Название блюдаОписаниеКалорийностьЦена
Куриная грудка с овощами грильНежная куриная грудка с цукини, баклажанами и болгарским перцем420 ккал450 руб.
Лосось с киноа и авокадоЗапеченный лосось с гарниром из киноа и свежим авокадо520 ккал620 руб.
Теплый салат с говядинойСочная говядина с микс-салатом, томатами черри и кедровыми орешками380 ккал490 руб.
Веганский боул с нутомЗапеченный нут, хумус, овощи и тахини соус450 ккал390 руб.
Паста с морепродуктамиПаста из твердых сортов пшеницы с креветками, мидиями и томатным соусом480 ккал550 руб.
Рисовая лапша с курицей териякиРисовая лапша wok с куриным филе в соусе терияки и овощами460 ккал420 руб.
+
+
+ + + + \ No newline at end of file diff --git a/labs/lab-05/menu.html b/labs/lab-05/menu.html new file mode 100644 index 0000000..d983a38 --- /dev/null +++ b/labs/lab-05/menu.html @@ -0,0 +1,158 @@ + + + + + + + Собрать ланч - ЭкоЛанч + + + + + + +
+

ЭкоЛанч

+ +
+ +
+
+
+

Супы

+
+ + + +
+
+
+
+ +
+
+

Главные блюда

+
+ + + +
+
+
+
+ +
+
+

Салаты и стартеры

+
+ + + +
+
+
+
+ +
+
+

Напитки

+
+ + +
+
+
+
+ +
+
+

Десерты

+
+ + + +
+
+
+
+
+ +
+

Оформить заказ

+
+
+ +
+

Ваш заказ

+
+

Ничего не выбрано

+
+
+ +
+

Данные для доставки

+ + + + + + + +
+ + +
+ + + + + + + Доставка осуществляется только по Москве + +
+ +
+ + +
+
+ + +
+
+ + + + Доступное время доставки с 7:00 до 23:00 + + + + +
+ + +
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/labs/lab-05/menu.js b/labs/lab-05/menu.js new file mode 100644 index 0000000..3cfceef --- /dev/null +++ b/labs/lab-05/menu.js @@ -0,0 +1,259 @@ +const selectedDishes = { + soup: null, + 'main-course': null, + salad: null, + drink: null, + dessert: null +}; + +let activeFilters = { + soup: null, + 'main-course': null, + salad: null, + drink: null, + dessert: null +}; + +function sortDishes() { + dishes.sort(function(a, b) { + return a.name.localeCompare(b.name, 'ru'); + }); +} + +function displayDishes() { + const soupSection = document.getElementById('soup-section'); + const mainCourseSection = document.getElementById('main-course-section'); + const saladSection = document.getElementById('salad-section'); + const drinkSection = document.getElementById('drink-section'); + const dessertSection = document.getElementById('dessert-section'); + + soupSection.innerHTML = ''; + mainCourseSection.innerHTML = ''; + saladSection.innerHTML = ''; + drinkSection.innerHTML = ''; + dessertSection.innerHTML = ''; + + dishes.forEach(function(dish) { + const dishCard = createDishCard(dish); + + if (dish.category === 'soup') { + if (!activeFilters.soup || dish.kind === activeFilters.soup) { + soupSection.insertAdjacentHTML('beforeend', dishCard); + } + } else if (dish.category === 'main-course') { + if (!activeFilters['main-course'] || + dish.kind === activeFilters['main-course']) { + mainCourseSection.insertAdjacentHTML('beforeend', dishCard); + } + } else if (dish.category === 'salad') { + if (!activeFilters.salad || dish.kind === activeFilters.salad) { + saladSection.insertAdjacentHTML('beforeend', dishCard); + } + } else if (dish.category === 'drink') { + if (!activeFilters.drink || dish.kind === activeFilters.drink) { + drinkSection.insertAdjacentHTML('beforeend', dishCard); + } + } else if (dish.category === 'dessert') { + if (!activeFilters.dessert || + dish.kind === activeFilters.dessert) { + dessertSection.insertAdjacentHTML('beforeend', dishCard); + } + } + }); + + addDishClickHandlers(); +} + +function createDishCard(dish) { + return ` +
+ ${dish.name} +

${dish.price} руб.

+

${dish.name}

+

${dish.count}

+ +
+ `; +} + +function addDishClickHandlers() { + const dishCards = document.querySelectorAll('.dish-card'); + + dishCards.forEach(function(card) { + card.addEventListener('click', function() { + const keyword = this.dataset.dish; + const dish = dishes.find(function(d) { + return d.keyword === keyword; + }); + + if (dish) { + selectDish(dish); + } + }); + }); +} + +function selectDish(dish) { + selectedDishes[dish.category] = dish; + updateOrderSummary(); +} + +function updateOrderSummary() { + const orderSummary = document.getElementById('order-summary'); + const hasSelection = selectedDishes.soup || + selectedDishes['main-course'] || + selectedDishes.salad || + selectedDishes.drink || + selectedDishes.dessert; + + if (!hasSelection) { + orderSummary.innerHTML = '

Ничего не выбрано

'; + return; + } + + let summaryHTML = ''; + let totalPrice = 0; + + if (selectedDishes.soup) { + summaryHTML += ` +
+

Суп

+
+ ${selectedDishes.soup.name} + ${selectedDishes.soup.price} руб. +
+
+ `; + totalPrice += selectedDishes.soup.price; + } else { + summaryHTML += ` +
+

Суп

+

Блюдо не выбрано

+
+ `; + } + + if (selectedDishes['main-course']) { + summaryHTML += ` +
+

Главное блюдо

+
+ ${selectedDishes['main-course'].name} + ${selectedDishes['main-course'].price} руб. +
+
+ `; + totalPrice += selectedDishes['main-course'].price; + } else { + summaryHTML += ` +
+

Главное блюдо

+

Блюдо не выбрано

+
+ `; + } + + if (selectedDishes.salad) { + summaryHTML += ` +
+

Салат

+
+ ${selectedDishes.salad.name} + ${selectedDishes.salad.price} руб. +
+
+ `; + totalPrice += selectedDishes.salad.price; + } else { + summaryHTML += ` +
+

Салат

+

Блюдо не выбрано

+
+ `; + } + + if (selectedDishes.drink) { + summaryHTML += ` +
+

Напиток

+
+ ${selectedDishes.drink.name} + ${selectedDishes.drink.price} руб. +
+
+ `; + totalPrice += selectedDishes.drink.price; + } else { + summaryHTML += ` +
+

Напиток

+

Напиток не выбран

+
+ `; + } + + if (selectedDishes.dessert) { + summaryHTML += ` +
+

Десерт

+
+ ${selectedDishes.dessert.name} + ${selectedDishes.dessert.price} руб. +
+
+ `; + totalPrice += selectedDishes.dessert.price; + } else { + summaryHTML += ` +
+

Десерт

+

Десерт не выбран

+
+ `; + } + + summaryHTML += ` +
+

Стоимость заказа

+

${totalPrice} руб.

+
+ `; + + orderSummary.innerHTML = summaryHTML; +} + +function setupFilters() { + const filterButtons = document.querySelectorAll('.filter-btn'); + + filterButtons.forEach(function(button) { + button.addEventListener('click', function() { + const kind = this.dataset.kind; + const section = this.closest('section'); + const category = section.querySelector('.dishes-grid').id + .replace('-section', ''); + + if (this.classList.contains('active')) { + this.classList.remove('active'); + activeFilters[category] = null; + } else { + const sectionButtons = section + .querySelectorAll('.filter-btn'); + sectionButtons.forEach(function(btn) { + btn.classList.remove('active'); + }); + this.classList.add('active'); + activeFilters[category] = kind; + } + + displayDishes(); + }); + }); +} + +document.addEventListener('DOMContentLoaded', function() { + sortDishes(); + displayDishes(); + setupFilters(); +}); \ No newline at end of file diff --git a/labs/lab-05/other/Вопросы для подготовки к защите ЛР №5.txt b/labs/lab-05/other/Вопросы для подготовки к защите ЛР №5.txt new file mode 100644 index 0000000..8b3975c --- /dev/null +++ b/labs/lab-05/other/Вопросы для подготовки к защите ЛР №5.txt @@ -0,0 +1,32 @@ +DOM и события +1. Что такое DOM? + +2. Какие есть способы получения элементов из DOM? + +3. Что такое событие? + +4. Как добавить обработчик события? + +5. Примеры свойств в объекте event. + +6. Как при добавлении обработчика события с помощью addEventListener убедиться, что он сработает только один раз? + +7. Примеры методов у элементов DOM. + +8. Какие методы из DOM позволяют создавать и добавлять элементы + +9. Назовите фазы жизненного цикла события. + +10. На какой фазе изначально срабатывают обработчики событий? + +11. Всплывают ли события blur и focus? + +12. Как остановить всплытие события и когда это может понадобиться? + +13. Как работает делегирование событий? + +14. Что такое data-атрибуты и как их использовать? + +15. В чём разница между innerHTML, outerHTML, textContent и innerText? + +16. Что такое DocumentFragment и для чего он используется? \ No newline at end of file diff --git a/labs/lab-05/other/Задание - Лабораторная работа 5.md b/labs/lab-05/other/Задание - Лабораторная работа 5.md new file mode 100644 index 0000000..8da04f5 --- /dev/null +++ b/labs/lab-05/other/Задание - Лабораторная работа 5.md @@ -0,0 +1,105 @@ +# Лабораторная работа №5. Добавление категорий и фильтров + +--- + +Добавьте новые блюда и категории. Создайте фильтры для каждой категории. + +## Порядок выполнения + +Примерные макеты разделов: +* Раздел "Выберите суп" +* Раздел "Выберите главное блюдо" +* Раздел "Выберите салат или стартер" +* Раздел "Выберите напиток" +* Раздел "Выберите десерт" +* Раздел "Сделать заказ" + +[Полный макет](https://lms.mospolytech.ru/pluginfile.php/1314142/mod_assign/intro/mockupfull.png "Полный макет") страницы: + +1. Для каждой категории блюд добавьте блок с фильтрами (фильтры - это кнопки). + +Фильтры для категорий: + +|Категория|Фильтры| +|---|---| +|Суп|рыбный
мясной
вегетарианский| +|Главное блюдо|рыбное
мясное
вегетарианское| +|Напиток|холодный
горячий| + +У каждой кнопки должен быть data-атрибут - data-kind. Значение data-kind - это название фильтра на английском. Например, для рыбных супов data-kind может быть со значением "fish". + +2. Для каждого объекта с блюдом добавьте новое свойство kind. Оно будет хранить значение для фильтрации. Значение kind должно соответствовать значению data-kind одного из фильтров. + +Например, если data-kind для вегетарианских супов - "veg", свойство kind супа "Гаспачо" тоже будет "veg". + +3. Добавьте новые категории блюд на страницу. + +Добавьте еще 2 категории блюд: +- Салаты и стартеры +- Десерты + +Структура блоков с новыми категориями должна быть такой же как у остальных категорий. Сейчас новые блоки не содержат блюд, вы будете заполнять их в следующем шаге. + +В данные категории также необходимо добавить блок с фильтрами. Фильтры: + +|Категория|Фильтры| +|---|---| +|Салат или стартер|рыбный
мясной
вегетарианский| +|Десерты|маленькая порция
средняя порция
большая порция| + +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/) \ No newline at end of file diff --git a/labs/lab-05/other/Результат запроса.png b/labs/lab-05/other/Результат запроса.png new file mode 100644 index 0000000..3b7cbcb Binary files /dev/null and b/labs/lab-05/other/Результат запроса.png differ diff --git a/labs/lab-05/styles.css b/labs/lab-05/styles.css new file mode 100644 index 0000000..e7c17b2 --- /dev/null +++ b/labs/lab-05/styles.css @@ -0,0 +1,546 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + font-family: 'Montserrat', sans-serif; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +header { + background-color: #2d5016; + color: white; + padding: 20px 40px; + margin: 0; +} + +h1 { + margin: 0 0 15px 0; + font-size: 36px; + color: white; +} + +nav { + margin: 0; + padding: 10px 0; + display: flex; + flex-wrap: wrap; + gap: 15px; +} + +nav a { + text-decoration: none; + color: white; + font-family: 'Montserrat', sans-serif; + font-size: 16px; +} + +nav a:hover { + color: #a8d08d; +} + +nav a#active { + color: tomato; +} + +main { + margin: 0 auto; + padding: 40px 60px; + max-width: 1200px; + flex: 1; +} + +section { + margin: 0 0 50px 0; + padding: 30px; + background-color: #f9f9f9; +} + +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + flex-wrap: wrap; + gap: 15px; +} + +.section-header h2 { + margin: 0; +} + +h2 { + font-size: 28px; + color: #2d5016; + margin: 0 0 20px 0; +} + +p { + font-family: 'Montserrat', sans-serif; + font-size: 16px; + color: #333; + line-height: 1.6; + margin: 0 0 15px 0; +} + +img { + width: 100%; + height: 400px; + object-fit: cover; + margin: 0 0 20px 0; +} + +ul { + margin: 20px 0; + padding: 0 0 0 25px; +} + +ul li { + font-family: 'Montserrat', sans-serif; + font-size: 16px; + color: #333; + margin: 0 0 12px 0; + line-height: 1.5; +} + +table { + width: 100%; + border-collapse: collapse; + margin: 20px 0; +} + +table th { + background-color: #2d5016; + color: white; + padding: 15px; + text-align: left; + border: 1px solid #2d5016; + font-size: 16px; +} + +table td { + padding: 12px 15px; + border: 1px solid #ddd; + text-align: left; + font-size: 15px; + color: #333; +} + +table tr:nth-child(even) { + background-color: #f2f2f2; +} + +.filter-buttons { + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +.filter-btn { + background-color: white; + border: 2px solid #2d5016; + color: #2d5016; + padding: 10px 20px; + border-radius: 10px; + cursor: pointer; + font-family: 'Montserrat', sans-serif; + font-size: 16px; + font-weight: 600; + transition: all 0.3s; +} + +.filter-btn:hover { + background-color: #f1eee9; +} + +.filter-btn.active { + background-color: #2d5016; + color: white; +} + +.dishes-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 10px; +} + +.dish-card { + display: flex; + flex-direction: column; + padding: 30px 40px; + border-radius: 35px; + cursor: pointer; + filter: drop-shadow(17px 19px 24px rgba(0, 0, 0, 0.13)); + background-color: white; +} + +.dish-card:hover { + border: 2px solid tomato; +} + +.dish-card:hover button { + background-color: tomato; + color: white; +} + +.dish-card img { + width: 100%; + height: auto; + aspect-ratio: 12 / 9; + object-fit: cover; + border-radius: 35px; + margin: 0 0 15px 0; +} + +.dish-price { + font-size: 20px; + font-weight: 600; + margin: 0 0 10px 0; +} + +.dish-name { + font-size: 18px; + font-weight: 600; + margin: 0 0 10px 0; +} + +.dish-weight { + color: #888; + margin: 0 0 10px 0; + margin-top: auto; +} + +.dish-card button { + background-color: #f1eee9; + border: none; + padding: 10px 30px; + border-radius: 10px; + cursor: pointer; + font-family: 'Montserrat', sans-serif; + font-size: 16px; + margin-top: 10px; +} + +.order-form { + margin: 0 auto; + padding: 40px 60px; + max-width: 1200px; + background-color: white; +} + +.order-form h2 { + text-align: center; + margin-bottom: 30px; +} + +#order-summary { + background-color: #f9f9f9; + padding: 30px; + border-radius: 10px; + margin-bottom: 20px; +} + +.empty-order { + text-align: center; + color: #888; + font-size: 18px; +} + +.order-category { + margin-bottom: 25px; +} + +.order-category h3 { + font-size: 20px; + color: #2d5016; + margin: 0 0 10px 0; +} + +.order-item { + display: flex; + justify-content: space-between; + padding: 10px 0; + font-size: 16px; +} + +.order-item span:first-child { + font-weight: 600; + word-wrap: break-word; + overflow-wrap: break-word; + max-width: 70%; +} + +.order-item span:last-child { + color: #2d5016; + font-weight: 600; + white-space: nowrap; +} + +.not-selected { + color: #888; + font-style: italic; + margin: 5px 0; +} + +.order-total { + margin-top: 30px; + padding-top: 20px; + border-top: 2px solid #2d5016; +} + +.order-total h3 { + font-size: 22px; + color: #2d5016; + margin: 0 0 10px 0; +} + +.total-price { + font-size: 24px; + font-weight: 700; + color: #2d5016; + margin: 0; +} + +.form-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; +} + +.order-section { + display: flex; + flex-direction: column; +} + +.order-section h3 { + font-size: 22px; + color: #2d5016; + margin: 0 0 20px 0; +} + +.customer-section { + display: flex; + flex-direction: column; +} + +.customer-section h3 { + font-size: 22px; + color: #2d5016; + margin: 0 0 20px 0; +} + +.order-form label { + font-size: 16px; + color: #333; + margin: 0 0 8px 0; + font-weight: 600; +} + +.order-form select, +.order-form input[type="text"], +.order-form input[type="email"], +.order-form input[type="tel"], +.order-form input[type="time"], +.order-form textarea { + width: 100%; + padding: 12px 15px; + margin: 0 0 20px 0; + border: 1px solid #ddd; + border-radius: 8px; + font-family: 'Montserrat', sans-serif; + font-size: 15px; +} + +.order-form select { + cursor: pointer; + background-color: white; +} + +.order-form textarea { + height: 100px; + resize: vertical; +} + +.checkbox-group { + display: flex; + align-items: center; + margin: 0 0 20px 0; +} + +.checkbox-group input[type="checkbox"] { + width: 18px; + height: 18px; + margin: 0 10px 0 0; + cursor: pointer; +} + +.checkbox-group label { + margin: 0; + font-weight: 400; + cursor: pointer; +} + +.radio-group { + margin: 0 0 20px 0; +} + +.radio-group > label { + display: block; + margin-bottom: 10px; +} + +.radio-group > div { + display: flex; + align-items: center; + margin: 0 0 8px 0; +} + +.radio-group input[type="radio"] { + width: 18px; + height: 18px; + margin: 0 10px 0 0; + cursor: pointer; +} + +.radio-group input[type="radio"] + label { + margin: 0; + font-weight: 400; + cursor: pointer; +} + +.form-buttons { + display: flex; + gap: 15px; + margin-top: 10px; +} + +.form-buttons button { + flex: 1; + padding: 15px 30px; + border: none; + border-radius: 10px; + font-family: 'Montserrat', sans-serif; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: background-color 0.3s; +} + +.form-buttons button[type="reset"] { + background-color: #f1eee9; + color: #333; +} + +.form-buttons button[type="reset"]:hover { + background-color: #e0ddd8; +} + +.form-buttons button[type="submit"] { + background-color: #2d5016; + color: white; +} + +.form-buttons button[type="submit"]:hover { + background-color: #3d6020; +} + +.form-hint { + display: block; + font-size: 13px; + color: #666; + margin: -15px 0 20px 0; + line-height: 1.4; +} + +footer { + background-color: black; + color: white; + padding: 30px 60px; + margin: 0; +} + +footer p { + color: white; + margin: 0 0 10px 0; +} + +footer a { + text-decoration: none; + color: white; + font-family: 'Montserrat', sans-serif; + font-size: 16px; +} + +footer a:hover { + color: #a8d08d; +} + +@media (max-width: 800px) { + .dishes-grid { + grid-template-columns: 1fr 1fr; + } + + nav { + justify-content: space-between; + } + + .about-company img { + width: 500px; + } + + .form-container { + grid-template-columns: 1fr; + gap: 20px; + } +} + +@media (max-width: 600px) { + h1 { + text-align: center; + } + + nav { + flex-direction: column; + align-items: center; + } + + nav a { + font-size: 20px; + } + + section h2 { + text-align: center; + } + + .dishes-grid { + grid-template-columns: 1fr; + } + + .about-company img { + width: 100%; + } + + table th, + table td { + font-size: 14px; + } + + .form-container { + grid-template-columns: 1fr; + } + + .form-buttons { + flex-direction: column; + } +} + +@media (max-width: 400px) { + table th, + table td { + font-size: 12px; + } +} \ No newline at end of file