Skip to content

Commit

Permalink
Fix some bugs like image not showing, and display modul and add some …
Browse files Browse the repository at this point in the history 
…features
  • Loading branch information
@MI-Programmer
MI-Programmer committed Mar 25, 2024
1 parent 0d647b6 commit 07c68fd
Show file tree
Hide file tree
Showing 10 changed files with 23 additions and 156 deletions.
8 changes: 8 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -692,5 +692,13 @@ footer .credit a {

.modal .modal-container {
margin-bottom: 15%;
max-height: 48rem;
}

.modal .modal-container .modal-content {
height: 100%;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
}
0 img/products/1.jpg → img/products/1-p.jpg
View file
File renamed without changes
0 img/products/2.jpg → img/products/2-p.jpg
View file
File renamed without changes
0 img/products/3.jpg → img/products/3-p.jpg
View file
File renamed without changes
0 img/products/4.jpg → img/products/4-p.jpg
View file
File renamed without changes
0 img/products/5.jpg → img/products/5-p.jpg
View file
File renamed without changes
0 img/products/6.jpg → img/products/6-p.jpg
View file
File renamed without changes
114 changes: 6 additions & 108 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,23 +50,24 @@
<!-- Shopping Cart Start -->
<div class="shopping-cart">
<div class="cart-item">
<img src="img/products/3.jpg" alt="Product 1" />
<img src="img/products/3-p.jpg" alt="Product 1" />
<div class="item-detail">
<h3>Product 1</h3>
<div class="item-price">IDR 22k</div>
</div>
s
<i data-feather="trash-2" class="remove-item"></i>
</div>
<div class="cart-item">
<img src="img/products/3.jpg" alt="Product 1" />
<img src="img/products/3-p.jpg" alt="Product 1" />
<div class="item-detail">
<h3>Product 1</h3>
<div class="item-price">IDR 22k</div>
</div>
<i data-feather="trash-2" class="remove-item"></i>
</div>
<div class="cart-item">
<img src="img/products/3.jpg" alt="Product 1" />
<img src="img/products/3-p.jpg" alt="Product 1" />
<div class="item-detail">
<h3>Product 1</h3>
<div class="item-price">IDR 22k</div>
Expand Down Expand Up @@ -170,88 +171,7 @@ <h2>Our <span>Special Product</span></h2>
</p>

<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>
</div>
<div class="product-image">
<img src="/img/products/1.jpg" alt="Product 1" />
</div>
<div class="product-content">
<h3>Coffee Beans</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">IDR 30k <span>IDR 55k</span></div>
</div>
</div>
<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>
</div>
<div class="product-image">
<img src="/img/products/2.jpg" alt="Product 3" />
</div>
<div class="product-content">
<h3>Coffee Cup</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">IDR 18k <span>IDR 30k</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/3.jpg" alt="Product 3" />
</div>
<div class="product-content">
<h3>Croissant</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">IDR 22k <span>IDR 25k</span></div>
</div>
</div>
<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>
</div>
<div class="product-image">
<img src="/img/products/4.jpg" alt="Product 4" />
</div>
<div class="product-content">
<h3>Brownie</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">IDR 25k <span>IDR 40k</span></div>
</div>
</div> -->
<!-- Container Products card -->
</div>
</section>
<!-- Products section end -->
Expand Down Expand Up @@ -319,29 +239,7 @@ <h2>Our <span>Contact</span></h2>
<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>
<p>
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.
</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" class="star-full"></i>
<i data-feather="star"></i>
</div>
<div class="product-price">IDR 22k <span>IDR 25k</span></div>
<a href="#"
><i data-feather="shopping-cart"></i> <span>add to cart</span></a
>
</div>
</div> -->
<!-- Container Modal Content -->
</div>
</div>
<!-- Modal Box Item Detail end -->
Expand Down
38 changes: 0 additions & 38 deletions js/data.js
View file

This file was deleted.

19 changes: 9 additions & 10 deletions js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Data Products
const dataProducts = [
{
image: "/img/products/1.jpg",
image: "img/products/1-p.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.",
Expand All @@ -10,7 +10,7 @@ const dataProducts = [
realPrice: "55",
},
{
image: "/img/products/2.jpg",
image: "img/products/2-p.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.",
Expand All @@ -19,7 +19,7 @@ const dataProducts = [
realPrice: "30",
},
{
image: "/img/products/3.jpg",
image: "img/products/3-p.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.",
Expand All @@ -28,7 +28,7 @@ const dataProducts = [
realPrice: "25",
},
{
image: "/img/products/4.jpg",
image: "img/products/4-p.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.",
Expand All @@ -37,7 +37,7 @@ const dataProducts = [
realPrice: "40",
},
{
image: "/img/products/5.jpg",
image: "img/products/5-p.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.",
Expand All @@ -46,7 +46,7 @@ const dataProducts = [
realPrice: "50",
},
{
image: "/img/products/6.jpg",
image: "img/products/6-p.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.",
Expand Down Expand Up @@ -143,8 +143,8 @@ dataProducts.map((product) => {

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>
<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}" />
Expand Down Expand Up @@ -181,7 +181,7 @@ function showModal(noProduct) {
${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
<a><img src="img/svg/shopping-cart.svg"/> <span>add to cart</span></a
>
</div>
</div>`;
Expand All @@ -194,4 +194,3 @@ function removeModal() {
itemDetailModal.style.display = "none";
modalContainer.lastElementChild.remove();
}
ss;

0 comments on commit 07c68fd

Please sign in to comment.