From 3e8686b0940a3438146767b4967cbb4206d93f66 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Fri, 28 Jul 2023 09:21:10 +0700 Subject: [PATCH 1/4] Init html layout for menu section --- practice/practice-02/src/includes/mixins.pug | 2 ++ practice/practice-02/src/index.pug | 1 + practice/practice-02/src/layouts/menu.pug | 21 ++++++++++++++++++++ practice/practice-02/src/layouts/offer.pug | 1 - 4 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 practice/practice-02/src/layouts/menu.pug diff --git a/practice/practice-02/src/includes/mixins.pug b/practice/practice-02/src/includes/mixins.pug index 4b47151..1cfd9c6 100644 --- a/practice/practice-02/src/includes/mixins.pug +++ b/practice/practice-02/src/includes/mixins.pug @@ -1,3 +1,5 @@ +- var avatar_img_path = "./assets/images/avatar/"; + mixin foodItemCard(food) .card-item img.card-img(src=offer_img_path + "item-card.png", alt="Item card image") diff --git a/practice/practice-02/src/index.pug b/practice/practice-02/src/index.pug index 2af539f..7422c13 100644 --- a/practice/practice-02/src/index.pug +++ b/practice/practice-02/src/index.pug @@ -23,3 +23,4 @@ html(lang="en") include layouts/welcome include layouts/offer include layouts/service + include layouts/menu diff --git a/practice/practice-02/src/layouts/menu.pug b/practice/practice-02/src/layouts/menu.pug new file mode 100644 index 0000000..8e6a377 --- /dev/null +++ b/practice/practice-02/src/layouts/menu.pug @@ -0,0 +1,21 @@ +- var image_menu_path = "./assets/images/menu/"; +- var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"]; +- var description_text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"; +- var image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.png"]; + +section.menu + .menu__container + h2.menu__heading + span.primary-text Menu + = " That " + span.secondary-text Always + = " Make You Fall In " + span.primary-text Love + .menu__list-category + each item in list_category + a.menu__category-item.link-text(href="javascript:void(0)")= item + .menu__card-list + each url in image_food + - var food = { imageUrl: url, price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: description_text, avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; + + +foodItemCard(food) diff --git a/practice/practice-02/src/layouts/offer.pug b/practice/practice-02/src/layouts/offer.pug index e4cc937..2e6d4f9 100644 --- a/practice/practice-02/src/layouts/offer.pug +++ b/practice/practice-02/src/layouts/offer.pug @@ -1,5 +1,4 @@ - var offer_img_path = "./assets/images/offer/"; -- var avatar_img_path = "./assets/images/avatar/"; - var food_1 = { imageUrl: offer_img_path + "food-1.png", price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; - var food_2 = { imageUrl: offer_img_path + "food-2.png", price: "15", ratePoint: "4.8", foodName: "Chicken Tikka", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-4.png" }, { avatarUrl: avatar_img_path + "avatar-5.png" }, { avatarUrl: avatar_img_path + "avatar-6.png" }] }; From 143496e8942941377e6162d1c3cd8d4cc718040d Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Fri, 28 Jul 2023 09:56:43 +0700 Subject: [PATCH 2/4] Edit menu.pug file --- practice/practice-02/src/layouts/menu.pug | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/practice/practice-02/src/layouts/menu.pug b/practice/practice-02/src/layouts/menu.pug index 8e6a377..50ceb37 100644 --- a/practice/practice-02/src/layouts/menu.pug +++ b/practice/practice-02/src/layouts/menu.pug @@ -1,7 +1,6 @@ - var image_menu_path = "./assets/images/menu/"; - var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"]; -- var description_text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"; -- var image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.png"]; +- var list_image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.png"]; section.menu .menu__container @@ -15,7 +14,7 @@ section.menu each item in list_category a.menu__category-item.link-text(href="javascript:void(0)")= item .menu__card-list - each url in image_food - - var food = { imageUrl: url, price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: description_text, avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; + each url in list_image_food + - var food = { imageUrl: url, price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; +foodItemCard(food) From 3109001e73c652695afb5e6f0bde176a239af346 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Fri, 28 Jul 2023 11:06:22 +0700 Subject: [PATCH 3/4] Update menu.pug file --- practice/practice-02/src/layouts/menu.pug | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/practice/practice-02/src/layouts/menu.pug b/practice/practice-02/src/layouts/menu.pug index 50ceb37..d91f290 100644 --- a/practice/practice-02/src/layouts/menu.pug +++ b/practice/practice-02/src/layouts/menu.pug @@ -1,11 +1,12 @@ - var image_menu_path = "./assets/images/menu/"; - var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"]; - var list_image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.png"]; +- var default_value = { price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; section.menu .menu__container h2.menu__heading - span.primary-text Menu + span.primary-text= Menu = " That " span.secondary-text Always = " Make You Fall In " @@ -15,6 +16,6 @@ section.menu a.menu__category-item.link-text(href="javascript:void(0)")= item .menu__card-list each url in list_image_food - - var food = { imageUrl: url, price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; + - var image_food = { imageUrl: url }; - +foodItemCard(food) + +foodItemCard({ ...image_food, ...default_value }) From c183174d6b668d2cfb86d4ea0a405dd621d7ccbd Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Fri, 28 Jul 2023 11:25:18 +0700 Subject: [PATCH 4/4] Edit variable name in menu.pug --- practice/practice-02/src/layouts/menu.pug | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/practice/practice-02/src/layouts/menu.pug b/practice/practice-02/src/layouts/menu.pug index d91f290..0cdd49a 100644 --- a/practice/practice-02/src/layouts/menu.pug +++ b/practice/practice-02/src/layouts/menu.pug @@ -1,7 +1,7 @@ - var image_menu_path = "./assets/images/menu/"; - var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"]; - var list_image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.png"]; -- var default_value = { price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; +- var default_food_data = { price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; section.menu .menu__container @@ -18,4 +18,4 @@ section.menu each url in list_image_food - var image_food = { imageUrl: url }; - +foodItemCard({ ...image_food, ...default_value }) + +foodItemCard({ ...image_food, ...default_food_data })