PRODUCT AWAL DARI VID 4 (HTML)

<!-- Produk Section Start -->

<section class="products" id="products">
<h2><span>Our</span> Products</h2>
<p>
Apart from providing several menus, we also sell several
birthday cake
products and various cup cakes!
</p>

<div class="row">
<div class="product-card">
<div class="product-icons">
<a href="#"><i data-feather="shopping-cart"></i></a>
<a href="#" class="item-detail-button"
><i data-feather="eye"></i
></a>
</div>
<div class="product-image">
<img src="img/products/coklat.jpg" alt="Product 1" />
</div>
<div class="product-content">
<h3>Chocolate Cake</h3>
<div class="product-stars">
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
</div>
<div class="product-price">Rp 90.000 <span>Rp
105.000</span></div>
</div>
</div>

<div class="product-card">
<div class="product-icons">
 <a href="#"><i data-feather="shopping-cart"></i></a>
<a href="#" class="item-detail-button"
><i data-feather="eye"></i
></a>
</div>
<div class="product-image">
<img src="img/products/stoberi.jpg" alt="Product 2"
/>
</div>
<div class="product-content">
<h3>Strawberry Cake</h3>
<div class="product-stars">
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star"></i>
</div>
<div class="product-price">Rp 85.000 <span>Rp
95.000</span></div>
</div>
</div>

<div class="product-card">
<div class="product-icons">
<a href="#"><i data-feather="shopping-cart"></i></a>
<a href="#" class="item-detail-button"
><i data-feather="eye"></i
></a>
</div>
<div class="product-image">
<img src="img/products/cupcake.jpg" alt="Product 3"
/>
</div>
<div class="product-content">
<h3>Cup Cakes</h3>
<div class="product-stars">
 <i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star"></i> <i data-
feather="star"></i>
</div>
<div class="product-price">Rp 25.000 <span>Rp
50.000</span></div>
</div>
</div>
</div>
</section>
<!-- Produk Section End -->

MODAL AWAL DARI VID 4 (HTML)

<!-- Modal Box Item 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">
<img src="img/products/coklat.jpg" alt="Product 1" />
<div class="product-content">
<h3>Chocolate Cake</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Impedit,
deserunt distinctio? Placeat accusantium distinctio
doloremque et
optio. Porro deleniti laborum odio minus ipsam non,
officiis
corrupti totam suscipit doloribus? Sint?
</p>
<div class="product-stars">
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
 <i data-feather="star" class="star-full"></i>
<i data-feather="star"></i>
<i data-feather="star"></i>
</div>
<div class="product-price">Rp. 90.000</div>
<a href="#"
><i data-feather="shopping-cart"></i><span>Add to
Cart</span></a
>
</div>
</div>
</div>
</div>
<!-- Modal Box Item End -->

MODAL JAVA AWAL DARI VID 4

//Modal Box
const itemDetailModal = document.querySelector("#item-detail-
modal");
const itemDetailButtons = document.querySelectorAll(".item-
detail-button");

itemDetailButtons.forEach((btn) => {
btn.onclick = (e) => {
itemDetailModal.style.display = "flex";
e.preventDefault();
};
});

// klik tombol close modal

document.querySelector(".modal .close-icon").onclick = (e) => {
itemDetailModal.style.display = "none";
e.preventDefault();
};
// klik diluar modal
const modal = document.querySelector("#item-detail-modal");
window.onclick = (e) => {
if (e.target === modal) {
modal.style.display = "none";
}
};