Refactor code

practice/practice-02/src/includes/mixins.pug

@@ -1,6 +1,4 @@
-- var values = [1, 2, 3];
-
-mixin cardFoodItem(food)
+mixin foodItemCard(food)
   .card-item
     img.card-img(src=offer_img_path + "item-card.png", alt="Item card image")
     img.food-image(src=food.imageUrl, alt=food.name + " image")
@@ -8,15 +6,16 @@ mixin cardFoodItem(food)
     .content-card
       .rate
         .avatar-container
-          each val in values 
-            img(
-              src=offer_img_path + "avatar-" + val + "-item-" + food.no + ".png",
-              alt="Avatar user rate",
-              class="avatar-" + val
-            )
+          if food.avatarImageList && food.avatarImageList.length > 0
+            each avatar, index in food.avatarImageList 
+              img(
+                src=avatar.avatarUrl,
+                alt="Avatar user rate",
+                class="avatar-" + index
+              )
         .star-container
           img(src=offer_img_path + "star.png", alt="Star image")
         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
+    a.order-btn.btn(href="javascript:void(0)") Order now

practice/practice-02/src/layouts/offer.pug

@@ -1,5 +1,11 @@
 - var offer_img_path = "./assets/images/offer/";
-- var food_1 = [];
+- 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" }] };
+- var food_3 = { imageUrl: offer_img_path + "food-3.png", price: "8", ratePoint: "4.2", foodName: "Desi Chowmein", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-7.png" }, { avatarUrl: avatar_img_path + "avatar-8.png" }, { avatarUrl: avatar_img_path + "avatar-9.png" }] };
+- var food_4 = { imageUrl: offer_img_path + "food-4.png", price: "28", ratePoint: "5.0", foodName: "Chicken Chargha", 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 list_food = [food_1, food_2, food_3, food_4];
 
 section.offer
   .offer__container
@@ -14,10 +20,8 @@ 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({ 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"})
+      each val in list_food
+        +foodItemCard(val)
   .offer__rosemary-container
     picture
       source(