Make a feature for look detail of product

css/style.css

@@ -355,13 +355,13 @@ html {
 .products .product-icons a {
   width: 4rem;
   height: 4rem;
-  color: #fff;
   margin: 0.3rem;
   border: 1px solid #666;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
 }
 
 .products .product-icons a:hover {
@@ -381,16 +381,12 @@ html {
   font-size: 2rem;
 }
 
-.products .product-content .product-stars {
+.products .product-content .product-stars .fa-star {
   font-size: 1.7rem;
-  padding: 0.8rem;
+  padding: 0.8rem 0.2rem;
   color: var(--primary);
 }
 
-.products .product-content .product-stars .star-full {
-  fill: var(--primary);
-}
-
 .products .product-price {
   font-size: 1.3rem;
   font-weight: bold;
@@ -529,6 +525,7 @@ footer .credit a {
 .modal .modal-container .close-icon {
   position: absolute;
   right: 1rem;
+  cursor: pointer;
 }
 
 .modal .modal-container .modal-content {
@@ -546,16 +543,34 @@ footer .credit a {
   font-size: 1.2rem;
   line-height: 1.8rem;
   margin-top: 1.2rem;
+  max-width: 95%;
+}
+
+.modal .modal-container .modal-content .product-stars .fa-star {
+  color: var(--primary);
+  margin: 0.5rem 0;
+  font-size: 1.4rem;
+}
+
+.modal .modal-container .modal-content .product-price span {
+  text-decoration: line-through;
+  color: #666;
 }
 
 .modal .modal-container .modal-content a {
   display: flex;
-  gap: 1rem;
-  width: 12rem;
+  gap: 0.5rem;
+  width: 14rem;
+  height: 4em;
   background-color: var(--primary);
   color: #fff;
   margin-top: 1rem;
   padding: 1rem 1.6rem;
+  cursor: pointer;
+}
+
+.modal .modal-container .modal-content a img {
+  height: 20px;
 }
 
 /* Media Queries */
@@ -654,11 +669,17 @@ footer .credit a {
   }
 
   .modal .modal-container {
-    margin-bottom: 5%;
+    margin-bottom: 8%;
   }
 
   .modal .modal-container .modal-content {
     flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .modal .modal-container .modal-content a {
+    margin: 1rem auto 0;
   }
 }
 

index.html

@@ -169,8 +169,8 @@ <h2>Our <span>Special Product</span></h2>
         tantalize your taste buds and elevate your coffee experience.
       </p>
 
-      <div class="row">
-        <div class="product-card">
+      <div class="row" id="row-products">
+        <!-- <div class="product-card">
           <div class="product-icons">
             <a href="#"><i data-feather="shopping-cart"></i></a>
             <a href="#"><i data-feather="eye"></i></a>
@@ -251,7 +251,7 @@ <h3>Brownie</h3>
             </div>
             <div class="product-price">IDR 25k <span>IDR 40k</span></div>
           </div>
-        </div>
+        </div> -->
       </div>
     </section>
     <!-- Products section end -->
@@ -315,9 +315,11 @@ <h2>Our <span>Contact</span></h2>
 
     <!-- Modal Box Item Detail start -->
     <div class="modal" id="item-detail-modal">
-      <div class="modal-container">
-        <a href="#" class="close-icon"><i data-feather="x"></i></a>
-        <div class="modal-content">
+      <div class="modal-container" id="modal-container">
+        <a class="close-icon" onclick="removeModal()"
+          ><i data-feather="x"></i
+        ></a>
+        <!-- <div class="modal-content">
           <img src="/img/products/3.jpg" alt="Product 3" />
           <div class="product-content">
             <h3>Product 3</h3>
@@ -339,7 +341,7 @@ <h3>Product 3</h3>
               ><i data-feather="shopping-cart"></i> <span>add to cart</span></a
             >
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <!-- Modal Box Item Detail end -->
@@ -349,6 +351,12 @@ <h3>Product 3</h3>
       feather.replace();
     </script>
 
+    <!-- Font Awesome -->
+    <script
+      src="https://kit.fontawesome.com/7318ba226e.js"
+      crossorigin="anonymous"
+    ></script>
+
     <!-- My Javascript -->
     <script src="./js/script.js"></script>
   </body>

js/data.js

@@ -1 +1,38 @@
-export const dataProducts = [];
+export const dataProducts = [
+  {
+    image: "/img/products/1.jpg",
+    noProduct: 1,
+    title: "Coffee Been",
+    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
+    starNumber: 3,
+    discPrice: "30",
+    realPrice: "55",
+  },
+  {
+    image: "/img/products/2.jpg",
+    noProduct: 2,
+    title: "Coffee Cup",
+    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
+    starNumber: 4,
+    discPrice: "18",
+    realPrice: "30",
+  },
+  {
+    image: "/img/products/3.jpg",
+    noProduct: 3,
+    title: "Croissant",
+    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
+    starNumber: 4,
+    discPrice: "22",
+    realPrice: "25",
+  },
+  {
+    image: "/img/products/4.jpg",
+    noProduct: 4,
+    title: "Brownie",
+    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
+    starNumber: 5,
+    discPrice: "25",
+    realPrice: "40",
+  },
+];

js/script.js

@@ -1,3 +1,61 @@
+// Data Products
+const dataProducts = [
+  {
+    image: "/img/products/1.jpg",
+    noProduct: 1,
+    title: "Coffee Been",
+    desc: "Welcome to our coffee shop, where every sip tells a story and every bean is carefully selected to ensure a remarkable experience. Our signature Coffee Bean blend is a testament to our dedication to quality and taste.",
+    starNumber: 3,
+    discPrice: "30",
+    realPrice: "55",
+  },
+  {
+    image: "/img/products/2.jpg",
+    noProduct: 2,
+    title: "Coffee Cup",
+    desc: "Elevate your coffee-drinking experience with our exquisite collection of coffee cups. Crafted with precision and style, each cup is designed to enhance the flavors and aromas of our premium brews.",
+    starNumber: 4,
+    discPrice: "18",
+    realPrice: "30",
+  },
+  {
+    image: "/img/products/3.jpg",
+    noProduct: 3,
+    title: "Croissant",
+    desc: "Indulge in the exquisite taste of our freshly baked croissants at our cozy coffee shop. Crafted with precision and passion, our croissants are a delightful blend of buttery richness and flaky texture, perfect for your morning pick-me-up or afternoon treat.",
+    starNumber: 4,
+    discPrice: "22",
+    realPrice: "25",
+  },
+  {
+    image: "/img/products/4.jpg",
+    noProduct: 4,
+    title: "Brownie",
+    desc: "Treat yourself to a moment of indulgence with our irresistible brownies. Baked fresh daily, our brownies are a harmonious blend of fudgy richness and decadent chocolate flavor.",
+    starNumber: 5,
+    discPrice: "25",
+    realPrice: "40",
+  },
+  {
+    image: "/img/products/5.jpg",
+    noProduct: 5,
+    title: "Muffin",
+    desc: "Each muffin is lovingly baked to perfection, ensuring a burst of flavor in every bite. Whether you're in the mood for a sweet treat or a savory snack, our muffins are sure to satisfy your taste buds and brighten your day.",
+    starNumber: 4,
+    discPrice: "30",
+    realPrice: "50",
+  },
+  {
+    image: "/img/products/6.jpg",
+    noProduct: 6,
+    title: "Donut",
+    desc: "Indulge in the irresistible allure of our donuts, boasting a perfect balance of soft, fluffy dough and delectable toppings. From classic glazed and powdered sugar to indulgent chocolate frosted and colorful sprinkles, our donut variety caters to every palate and preference.",
+    starNumber: 3,
+    discPrice: "10",
+    realPrice: "30",
+  },
+];
+
 // DOM JS
 // Navbar
 const navbarNav = document.querySelector(".navbar-nav");
@@ -15,11 +73,14 @@ const shoppingCart = document.querySelector(".shopping-cart");
 // Modal
 const closeModalButton = document.querySelector(".close-icon");
 const itemDetailModal = document.querySelector("#item-detail-modal");
-const itemDetailButton = document.querySelector(".item-detail-button");
+const modalContainer = document.querySelector("#modal-container");
 
 // Hamburger Menu
 const hm = document.querySelector("#hamburger-menu");
 
+// Products Row
+let productsRow = document.querySelector("#row-products");
+
 // When hamburger menu on click
 document.querySelector("#hamburger-menu").onclick = (e) => {
   navbarNav.classList.toggle("active");
@@ -64,18 +125,73 @@ document.addEventListener("click", function (e) {
   // For Modal Box
   if (itemDetailModal === e.target) {
     itemDetailModal.style.display = "none";
+    modalContainer.lastElementChild.remove();
   }
 });
 
-// Modal Box
+// element star
+const star = `<i class="fa-regular fa-star"></i>`;
+const starFullColor = `<i class="fa-solid fa-star"></i>`;
+
+// Make element products card
+dataProducts.map((product) => {
+  const starFull = [...Array(product.starNumber)].map((_) => starFullColor);
+  for (let i = starFull.length; i < 5; i++) {
+    starFull.push(star);
+  }
+  const stars = `${starFull[0]}${starFull[1]}${starFull[2]}${starFull[3]}${starFull[4]}`;
+
+  productsRow.innerHTML += `<div class="product-card">
+          <div class="product-icons">
+            <a ><img src="/img/svg/shopping-cart.svg"/></a>
+            <a onclick="showModal(${product.noProduct})"><img src="/img/svg/eye.svg"/></a>
+          </div>
+          <div class="product-image">
+            <img src="${product.image}" alt="Product ${product.noProssduct}" />
+          </div>
+          <div class="product-content">
+            <h3>${product.title}</h3>
+            <div class="product-stars">
+            ${stars}
+            </div>
+            <div class="product-price">IDR ${product.discPrice}k <span>IDR ${product.realPrice}k</span></div>
+          </div>
+        </div>`;
+});
+
 // Show Modal
-itemDetailButton.addEventListener("click", (e) => {
+function showModal(noProduct) {
+  const modalProduct = dataProducts[noProduct - 1];
+  const starFull = [...Array(modalProduct.starNumber)].map(
+    (_) => starFullColor
+  );
+  for (let i = starFull.length; i < 5; i++) {
+    starFull.push(star);
+  }
+  const stars = `${starFull[0]}${starFull[1]}${starFull[2]}${starFull[3]}${starFull[4]}`;
+
+  modalContainer.innerHTML += `<div class="modal-content">
+          <img src="${modalProduct.image}" alt="${modalProduct.noProduct}" />
+          <div class="product-content">
+            <h3>Product ${modalProduct.noProduct}</h3>
+            <p>
+              ${modalProduct.desc}
+            </p>
+            <div class="product-stars">
+              ${stars}
+            </div>
+            <div class="product-price">IDR ${modalProduct.discPrice}k <span>IDR ${modalProduct.realPrice}k</span></div>
+            <a><img src="/img/svg/shopping-cart.svg"/> <span>add to cart</span></a
+            >
+          </div>
+        </div>`;
+
   itemDetailModal.style.display = "flex";
-  e.preventDefault();
-});
+}
 
 // Close Modal
-closeModalButton.addEventListener("click", (e) => {
+function removeModal() {
   itemDetailModal.style.display = "none";
-  e.preventDefault();
-});
+  modalContainer.lastElementChild.remove();
+}
+ss;