From aa26c5fb1182249949ccc323f00d66fdf3ec4453 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Mon, 24 Jul 2023 15:37:01 +0700 Subject: [PATCH] Update mixins.pug and offer.pug file --- practice/practice-02/src/includes/mixins.pug | 17 +++++++---------- practice/practice-02/src/layouts/offer.pug | 9 +++++---- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/practice/practice-02/src/includes/mixins.pug b/practice/practice-02/src/includes/mixins.pug index 0fa72f2..60cc7a4 100644 --- a/practice/practice-02/src/includes/mixins.pug +++ b/practice/practice-02/src/includes/mixins.pug @@ -1,25 +1,22 @@ - var values = [1, 2, 3]; -mixin cardFoodItem(itemFood, price, ratePoint, foodName, foodDescription) +mixin cardFoodItem(food) .card-item img.card-img(src=offer_img_path + "item-card.png", alt="Item card image") - img.food-image( - src=offer_img_path + "food-" + itemFood + ".png", - alt="Food " + itemFood + " image" - ) - span.price= price + "$" + img.food-image(src=food.imageUrl, alt=food.name + " image") + span.price= food.price + "$" .content-card .rate .avatar-container each val in values img( - src=offer_img_path + "avatar-" + val + "-item-" + itemFood + ".png", + src=offer_img_path + "avatar-" + val + "-item-" + food.no + ".png", alt="Avatar user rate", class="avatar-" + val ) .star-container img(src=offer_img_path + "star.png", alt="Star image") - span.rate-point= "(" + ratePoint + ")" - span.food-name= foodName - p.food-description= foodDescription + span.rate-point= "(" + food.ratePoint + ")" + p.food-name= food.foodName + p.food-description= food.foodDescription a.order-btn.btn.no-underline(href="javascript:void(0)") Order now diff --git a/practice/practice-02/src/layouts/offer.pug b/practice/practice-02/src/layouts/offer.pug index f3291ab..c108d0a 100644 --- a/practice/practice-02/src/layouts/offer.pug +++ b/practice/practice-02/src/layouts/offer.pug @@ -1,4 +1,5 @@ - var offer_img_path = "./assets/images/offer/"; +- var food_1 = []; section.offer .offer__container @@ -13,10 +14,10 @@ section.offer = " Offers" p.offer__description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s .offer__card-list - +cardFoodItem(1, 10, "4.5", "Kebab", "Lorem Ipsum is simply dummy text of the printing and typesetting industry") - +cardFoodItem(2, 15, "4.8", "Chicken Tikka", "Lorem Ipsum is simply dummy text of the printing and typesetting industry") - +cardFoodItem(3, 8, "4.2", "Desi Chowmein", "Lorem Ipsum is simply dummy text of the printing and typesetting industry") - +cardFoodItem(4, 28, "5.0", "Chicken Chargha", "Lorem Ipsum is simply dummy text of the printing and typesetting industry") + +cardFoodItem({ no: "1", price: "10" , ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", imageUrl: offer_img_path + "food-1.png"}) + +cardFoodItem({ no: "2", price: "15", ratePoint: "4.8", foodName: "Chicken Tikka", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", imageUrl: offer_img_path + "food-2.png"}) + +cardFoodItem({ no: "3", price: "8", ratePoint: "4.2", foodName: "Desi Chowmein", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", imageUrl: offer_img_path + "food-3.png"}) + +cardFoodItem({ no: "4", price: "28", ratePoint: "5.0", foodName: "Chicken Chargha", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", imageUrl: offer_img_path + "food-4.png"}) .offer__rosemary-container picture source(