<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4" defer></script>
<title>ABC Electronics</title>
</head>
<body>
<nav>
<h2 style="cursor: pointer;" onclick='backToHome()'>ABC Electronics</h2>
<div class='cart-container' onclick='toggle()'>
<i style="font-size: 1.7rem;" class="bi bi-cart-fill"></i>
<span class='item-added-count' id='total-items'>0</span>
</div>
</nav>
<main class='main-section'>
<section class="products" id="products">
<!-- <div class="product">
<img alt='product' src=>
<div class="product-info">
<p class='product-name'>Wireless Headphone</p>
<p class='product-description'>High-quality wireless headphones with noise cancellation.</p>
<div class="product-footer">
<div class="product-price">$23</div>
<div class='increase-decrease-option'>
<i class="bi bi-dash"></i>
<span>0</span>
<i class="bi bi-plus-lg"></i>
</div>
</div>
</div>
</div> -->
</section>
</main>
<main class='card-section disappear' id="card-section">
<!-- <div style="width: 300px; border-radius: 8px; overflow: hidden; height: 130px; overflow-hidden; display: flex; border: 3px solid #718355;">
<img style="height: 100%;" src="https://picsum.photos/id/237/200/300" alt="product image">
<div style="padding: 10px 5px; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-between; row-gap: 13px;">
<div style="display: flex; align-items: center; justify-content: space-between; column-gap: 30px;">
<div>
<span style="font-size: 1.05rem; font-weight: bold;">name</span>
<span style="font-size: 1.05rem; font-weight: bold;">$price</span>
</div>
<span><i style="cursor: pointer;" class="bi bi-x-square"></i></span></div>
<div>increase decrease</div>
<div style="font-size: 1.1rem; font-weight: bold;">price * quantity</div>
</div>
</div> -->
</main>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>About</h6>
<p class="text-justify">ABC Electronics is an online e-commerce platform dedicated to providing the latest and most innovative electronic products. From cutting-edge gadgets to everyday accessories, we offer a wide selection of high-quality items designed to enhance your digital lifestyle.</p>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2025 All Rights Reserved by
<a href="#">ABC Electronics</a>.
</p>
</div>
</div>
</div>
</footer>
</body>
</html>@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
font-family: sans-serif;
background-color: whitesmoke;
}
/* nav styles here */
nav {
background-color: #718355;
color: whitesmoke;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
}
nav h2 {
font-size: 1.6rem;
}
.cart-container {
color: black;
background-color: white;
border-radius: 5px;
padding: 10px;
font-size: 1.3rem;
position: relative;
cursor: pointer;
transition: all 170ms;
}
.item-added-count {
background-color: orange;
padding: 2px;
border-radius: 3px;
position: absolute;
top: -9px;
right: -9px;
}
.cart-container:active {
background-color: white;
scale: 1;
}
/* product styling */
.products {
display: grid;
grid-template-columns: repeat(5, 1fr);
row-gap: 20px;
margin: 20px 10px;
place-items: center;
align-items: start;
}
.product {
border: 3px solid #adc178;
border-radius: 7px;
width: 250px;
background: #adc178;
color: #212529;
}
.product img {
width: 100%;
height: auto;
}
.product .product-name {
font-size: 1.3rem;
font-weight: bold;
color: #212529;
}
.product .product-description {
font-size: 1rem;
font-weight: 400;
color: #212529;
}
.product .product-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.product .product-price {
font-size: 1.3rem;
font-weight: 700;
color: #212529;
}
.product .increase-decrease-option {
font-size: 1.3rem;
font-weight: 700;
color: #212529;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 8px;
}
.product .increase-decrease-option > i {
cursor: pointer;
fill: #212529;
text-shadow: 1px 1px 2px black;
}
.product .increase-decrease-option > i:active {
scale: 0.9;
}
.product-info {
display: flex;
flex-direction: column;
row-gap: 10px;
padding: 10px 5px;
}
.card-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 15px 0px;
row-gap: 10px;
}
.disappear {
display: none;
}
.site-footer {
background-color: #26272b;
padding: 20px;
font-size: 15px;
line-height: 24px;
color: #737373;
}
.site-footer hr {
border-top-color: #bbb;
opacity: 0.5;
}
.site-footer hr.small {
margin: 20px 0;
}
.site-footer h6 {
color: #fff;
font-size: 16px;
text-transform: uppercase;
margin-top: 5px;
letter-spacing: 2px;
}
.site-footer a {
color: #737373;
}
.footer-links {
padding-left: 0;
list-style: none;
}
.footer-links li {
display: block;
}
.footer-links a {
color: #737373;
}
.footer-links.inline li {
display: inline-block;
}
.site-footer .social-icons {
text-align: right;
}
.site-footer .social-icons a {
width: 40px;
height: 40px;
line-height: 40px;
margin-left: 6px;
margin-right: 0;
border-radius: 100%;
background-color: #33353d;
}
.copyright-text {
margin: 0;
}
@media (max-width: 991px) {
.site-footer [class^="col-"] {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.site-footer {
padding-bottom: 0;
}
.site-footer .copyright-text,
.site-footer .social-icons {
text-align: center;
}
}
.social-icons {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.social-icons li {
display: inline-block;
margin-bottom: 4px;
}
.social-icons li.title {
margin-right: 15px;
text-transform: uppercase;
color: #96a2b2;
font-weight: 700;
font-size: 13px;
}
.social-icons a {
background-color: #eceeef;
color: #818a91;
font-size: 16px;
display: inline-block;
line-height: 44px;
width: 44px;
height: 44px;
text-align: center;
margin-right: 8px;
border-radius: 100%;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.social-icons a:active,
.social-icons a:focus,
.social-icons a:hover {
color: #fff;
background-color: #29aafe;
}
.social-icons.size-sm a {
line-height: 34px;
height: 34px;
width: 34px;
font-size: 14px;
}
.social-icons a.facebook:hover {
background-color: #3b5998;
}
.social-icons a.twitter:hover {
background-color: #00aced;
}
.social-icons a.linkedin:hover {
background-color: #007bb6;
}
.social-icons a.dribbble:hover {
background-color: #ea4c89;
}
@media (max-width: 576px) {
/* Styles for mobile phones */
.products {
grid-template-columns: repeat(1, 1fr);
row-gap: 10px;
}
/* .card-section {
padding: 0px 10px;
}
.cart-card {
height: 160px;
margin: 0px 10px;
} */
}
@media (min-width: 576px) and (max-width: 768px) {
.products {
grid-template-columns: repeat(2, 1fr);
}
.cart-container:hover {
background-color: #e9f5db;
scale: 1.07;
}
.product:hover {
opacity: 0.85;
}
}
@media (min-width: 768px) and (max-width: 992px) {
.products {
grid-template-columns: repeat(3, 1fr);
}
.cart-container:hover {
background-color: #e9f5db;
scale: 1.07;
}
.product:hover {
opacity: 0.85;
}
.cart-container:hover {
background-color: #e9f5db;
scale: 1.07;
}
.product:hover {
opacity: 0.85;
}
}
@media (min-width: 992px) and (max-width: 1240px) {
.products {
grid-template-columns: repeat(4, 1fr);
}
.cart-container:hover {
background-color: #e9f5db;
scale: 1.07;
}
.product:hover {
opacity: 0.85;
}
}
let cart = JSON.parse(localStorage.getItem("lsCart")) || [];
const products = document.getElementById("products");
(() => {
fetch(
"https://raw.githubusercontent.com/Saad-Al-Rifat/e-com-json/refs/heads/main/products"
)
.then((res) => res.json())
.then((data) => renderProducts(data));
})();
const renderProducts = (objProducts) => {
for (let product of objProducts) {
({ product_img, product_name, description, price, id } = product);
products.innerHTML += `
<div class="product" id=product-id-${product.id}>
<img alt='product' src=${product.product_img}>
<div class="product-info">
<p class='product-name'>${product.product_name}</p>
<p class='product-description'>${product.description}</p>
<div class="product-footer">
<div class="product-price">$${product.price}</div>
<div class='increase-decrease-option'>
<i onclick="decreament(${product.id})" class="bi bi-dash"></i>
<span id=${product.id} >0</span> <i onclick="increament(${product.id})" class="bi bi-plus-lg"></i>
</div>
</div>
</div>
</div>
`;
}
setTotalItem();
updateCartCount();
renderCardData();
};
const increament = (id) => {
console.log(id);
const selectedItem = id;
const search = cart.find((item) => item.id === selectedItem.id);
if (!search) {
cart.push({
id: selectedItem.id,
count: 1
});
} else {
search.count += 1;
}
update(id);
};
const decreament = (id) => {
if (parseInt(id.innerText) != 0) {
const search = cart.find((item) => item.id === id.id);
id.innerText = search.count--;
} else {
return;
}
update(id);
};
const update = (id) => {
const search = cart.find((item) => item.id === id.id);
id.innerText = search.count;
cart = cart.filter((item) => item.count !== 0);
updateCartCount();
localStorage.setItem("lsCart", JSON.stringify(cart));
renderCardData();
renderCardData();
};
function toggle() {
const mainSection = document.querySelector(".main-section");
const cartSection = document.querySelector(".card-section");
mainSection.classList.toggle("disappear");
cartSection.classList.toggle("disappear");
}
function backToHome() {
const mainSection = document.querySelector(".main-section");
const cartSection = document.querySelector(".card-section");
mainSection.classList.remove("disappear");
cartSection.classList.add("disappear");
}
const renderCardData = () => {
let totalPrice = 0;
const cartSection = document.getElementById("card-section");
cartSection.innerHTML = "";
cart.forEach((item) => {
const el = document.getElementById(item.id);
const quantity = document.getElementById(item.id);
const productImage =
el.parentElement.parentElement.parentElement.parentElement.children[0];
// const increamentDecreamentOption = el.parentElement.parentElement.children[1]
const productName =
el.parentElement.parentElement.parentElement.children[0];
const productPrice =
el.parentElement.parentElement.parentElement.children[2].children[0];
const productPriceInStringInt = productPrice.innerText.replace("$", "");
totalPrice +=
parseFloat(quantity.innerText) * parseFloat(productPriceInStringInt);
cartSection.innerHTML += `
<div class="cart-card" style="width: 360px; border-radius: 8px; overflow: hidden; height: 165px; overflow-hidden; display: flex; column-gap: 10px; border: 3px solid #718355;">
<img style="height: 100%;" src=${productImage.src} alt="product image">
<div style="padding: 10px 5px; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-between; row-gap: 13px;">
<div style="display: flex; align-items: center; justify-content: space-between; column-gap: 30px;">
<div>
<span style="font-size: 1.04rem; font-weight: bold;">${
productName.innerText
}</span>
<span style="font-size: 1.04rem; font-weight: bold;">${
productPrice.innerText
}</span>
</div>
<span><i onclick='removeItem(${
item.id
})' style="cursor: pointer;" class="bi bi-x-square"></i></span></div>
<div class='increase-decrease-option'>
<i style="cursor: pointer;" onclick="decreament(${
item.id
})" class="bi bi-dash"></i>
<span id=${id} >${quantity.innerText}</span> <i onclick="increament(${
item.id
})" style="cursor: pointer;" class="bi bi-plus-lg"></i>
</div>
<div style="font-size: 1.1rem; font-weight: bold;">$${(
parseFloat(quantity.innerText) * parseFloat(productPriceInStringInt)
).toFixed(2)}</div>
</div>
</div>
`;
});
totalPrice = totalPrice.toFixed(2);
totalPriceInDollar(totalPrice);
};
function removeItem(el) {
let id = "";
el.id ? (id = el.id) : (id = el[0].id);
cart = cart.filter((item) => item.id !== id);
localStorage.setItem("lsCart", JSON.stringify(cart));
el.innerText = 0;
renderCardData();
// setTotalItem()
updateCartCount();
}
function updateCartCount() {
let totalItems = 0;
cart.forEach((item) => {
totalItems += item.count;
});
document.getElementById("total-items").innerText = totalItems;
}
function totalPriceInDollar(totalPrice) {
const cartSection = document.getElementById("card-section");
const p = document.createElement("p");
p.innerText = `Total Price: $${totalPrice}`;
p.style.cssText =
"color: whitesmoke; font-size: 1.2rem; background-color: #718355; padding: 10px 5px; margin: 10px; border: 2px solid white; border-radius: 5px;";
cartSection.appendChild(p);
}
function setTotalItem() {
cart.forEach((item) => {
document.getElementById(item.id).innerText = item.count;
});
}
setTimeout(() => {
alert("don't touch the last item/product \nSomehow it's creating issue");
}, 5000);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.