Skip to content

Commit 6635e8b

Browse files
vridhi14vridhi14
authored
Add files via upload
1 parent 5354ced commit 6635e8b

12 files changed

Lines changed: 525 additions & 0 deletions

File tree

‎E-commerce Website/images/product1.jpg‎

164 KB
Loading

‎E-commerce Website/images/product2.jpg‎

168 KB
Loading

‎E-commerce Website/images/product3.jpg‎

149 KB
Loading

‎E-commerce Website/images/product4.jpg‎

209 KB
Loading

‎E-commerce Website/images/product5.jpg‎

173 KB
Loading

‎E-commerce Website/images/product6.jpg‎

141 KB
Loading

‎E-commerce Website/images/product7.jpg‎

130 KB
Loading

‎E-commerce Website/images/product8.jpg‎

161 KB
Loading

‎E-commerce Website/index.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
9+
</head>
10+
<body>
11+
<header>
12+
<a href="#" class="logo">E-Commerce</a>
13+
<div id="cart-icon"><i class="fa-solid fa-bag-shopping"></i>
14+
<span class="cart-item-count"></span>
15+
</div>
16+
</header>
17+
18+
<div class="cart">
19+
<h2 class="cart-title">your cart </h2>
20+
<div class="cart-content">
21+
<!-- <div class="cart-box">
22+
<img src="images/product1.jpg" class="cart-img">
23+
<div class="cart-detail">
24+
<h2 class="cart-product-title">casual black polo</h2>
25+
<span class="cart-price">$100</span>
26+
<div class="cart-quantity">
27+
<button id="decrement">-</button>
28+
<span class="number">1</span>
29+
<button id="increement">+</button>
30+
</div>
31+
</div>
32+
<i class="fa-solid fa-circle-minus cart-remove"></i>
33+
</div> -->
34+
</div>
35+
<div class="total">
36+
<div class="total-title"></div>
37+
<div class="total-price"></div>
38+
</div>
39+
<button class="btn-buy">Buy Now</button>
40+
<i class="fa-solid fa-xmark" id="cart-close"></i>
41+
</div>
42+
43+
<section class="shop">
44+
<h1 class="section-title">SHOP PRODUCTS</h1>
45+
<div class="product-content">
46+
<div class="product-box">
47+
<div class="img-box">
48+
<img src="images/product1.jpg">
49+
</div>
50+
<h2 class="product-title">Casual Black Polo </h2>
51+
<div class="price-and-cart">
52+
<span class="price">$100</span>
53+
<i class="fa-solid fa-bag-shopping add-cart"></i>
54+
</div>
55+
</div>
56+
<div class="product-box">
57+
<div class="img-box">
58+
<img src="images/product2.jpg">
59+
</div>
60+
<h2 class="product-title">Casual brown Polo </h2>
61+
<div class="price-and-cart">
62+
<span class="price">$100</span>
63+
<i class="fa-solid fa-bag-shopping add-cart"></i>
64+
</div>
65+
</div>
66+
<div class="product-box">
67+
<div class="img-box">
68+
<img src="images/product3.jpg">
69+
</div>
70+
<h2 class="product-title">Casual Blue Polo </h2>
71+
<div class="price-and-cart">
72+
<span class="price">$100</span>
73+
<i class="fa-solid fa-bag-shopping add-cart"></i>
74+
</div>
75+
</div>
76+
<div class="product-box">
77+
<div class="img-box">
78+
<img src="images/product4.jpg">
79+
</div>
80+
<h2 class="product-title">Casual beinge Polo </h2>
81+
<div class="price-and-cart">
82+
<span class="price">$100</span>
83+
<i class="fa-solid fa-bag-shopping add-cart"></i>
84+
</div>
85+
</div>
86+
<div class="product-box">
87+
<div class="img-box">
88+
<img src="images/product5.jpg">
89+
</div>
90+
<h2 class="product-title">Casual Blck-grey Polo </h2>
91+
<div class="price-and-cart">
92+
<span class="price">$100</span>
93+
<i class="fa-solid fa-bag-shopping add-cart"></i>
94+
</div>
95+
</div>
96+
<div class="product-box">
97+
<div class="img-box">
98+
<img src="images/product6.jpg">
99+
</div>
100+
<h2 class="product-title">Casual grey Polo </h2>
101+
<div class="price-and-cart">
102+
<span class="price">$100</span>
103+
<i class="fa-solid fa-bag-shopping add-cart"></i>
104+
</div>
105+
</div>
106+
<div class="product-box">
107+
<div class="img-box">
108+
<img src="images/product7.jpg">
109+
</div>
110+
<h2 class="product-title">Casual bottom-green Polo </h2>
111+
<div class="price-and-cart">
112+
<span class="price">$100</span>
113+
<i class="fa-solid fa-bag-shopping add-cart"></i>
114+
</div>
115+
</div>
116+
<div class="product-box">
117+
<div class="img-box">
118+
<img src="images/product8.jpg">
119+
</div>
120+
<h2 class="product-title">Casual yellow Polo </h2>
121+
<div class="price-and-cart">
122+
<span class="price">$100</span>
123+
<i class="fa-solid fa-bag-shopping add-cart"></i>
124+
</div>
125+
</div>
126+
</div>
127+
</section>
128+
129+
<script src="main.js"></script>
130+
</body>
131+
</html>

‎E-commerce Website/main.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
2+
// ================= CART OPEN / CLOSE =================
3+
const cartIcon = document.querySelector("#cart-icon");
4+
const cart = document.querySelector(".cart");
5+
const cartClose = document.querySelector("#cart-close");
6+
7+
cartIcon.addEventListener("click", () => cart.classList.add("active"));
8+
cartClose.addEventListener("click", () => cart.classList.remove("active"));
9+
10+
11+
// ================= ADD TO CART =================
12+
const cartContent = document.querySelector(".cart-content");
13+
14+
// Correct function (must be BEFORE event listeners)
15+
function addToCart(productBox) {
16+
const productImgSrc = productBox.querySelector("img").src;
17+
const productTitle = productBox.querySelector(".product-title").textContent;
18+
const productPrice = productBox.querySelector(".price").textContent;
19+
20+
// Check duplicates
21+
const cartItems = document.querySelectorAll(".cart-product-title");
22+
for (let item of cartItems) {
23+
if (item.textContent === productTitle) {
24+
alert("This product is already in the cart");
25+
return;
26+
}
27+
}
28+
29+
// Create cart box
30+
const cartBox = document.createElement("div");
31+
cartBox.classList.add("cart-box");
32+
33+
cartBox.innerHTML = `
34+
<img src="${productImgSrc}" class="cart-img">
35+
<div class="cart-detail">
36+
<h2 class="cart-product-title">${productTitle}</h2>
37+
<span class="cart-price">${productPrice}</span>
38+
<div class="cart-quantity">
39+
<button id="decrement">-</button>
40+
<span class="number">1</span>
41+
<button id="increement">+</button>
42+
</div>
43+
</div>
44+
<i class="fa-solid fa-circle-minus cart-remove"></i>
45+
`;
46+
47+
cartContent.appendChild(cartBox);
48+
//delete from the cart
49+
cartBox.querySelector(".cart-remove").addEventListener("click" , ()=>{
50+
cartBox.remove();
51+
UpdatedCartCount(-1);
52+
UpdatedTotalPrice();
53+
});
54+
55+
cartBox.querySelector(".cart-quantity").addEventListener("click" , event=>{
56+
const numberElemet = cartBox.querySelector(".number");
57+
const decrementButton = cartBox.querySelector("#decrement");
58+
let quantity = numberElemet.textContent;
59+
60+
if(event.target.id === "decrement" && quantity >1){
61+
quantity-- ;
62+
if(quantity === 1){
63+
decrementButton.style.color = "#999";
64+
}
65+
}else if( event.target.id === "increement"){
66+
quantity++ ;
67+
decrementButton.style.color = "#333";
68+
}
69+
numberElemet.textContent = quantity ;
70+
UpdatedTotalPrice();
71+
});
72+
UpdatedCartCount(1);
73+
UpdatedTotalPrice();
74+
}
75+
76+
77+
// ================= ADD-CART BUTTON LOGIC =================
78+
const addCartButton = document.querySelectorAll(".add-cart");
79+
80+
addCartButton.forEach(button => {
81+
button.addEventListener("click", event => {
82+
const productBox = event.target.closest(".product-box");
83+
addToCart(productBox);
84+
});
85+
});
86+
87+
// total price
88+
const UpdatedTotalPrice = () => {
89+
const totalPriceElement = document.querySelector(".total-price");
90+
const cartBoxes = document.querySelectorAll(".cart-box"); // FIX 1
91+
92+
let total = 0;
93+
94+
cartBoxes.forEach(cartBox => {
95+
const priceElement = cartBox.querySelector(".cart-price");
96+
const quantityElement = cartBox.querySelector(".number");
97+
98+
const price = Number(priceElement.textContent.replace("$",""));
99+
const quantity = Number(quantityElement.textContent); // FIX 2
100+
101+
total += price * quantity;
102+
});
103+
104+
totalPriceElement.textContent = "$" + total;
105+
};
106+
107+
108+
let cartItemCount = 0 ;
109+
const UpdatedCartCount = change =>{
110+
const cartItemCountBadge = document.querySelector(".cart-item-count");
111+
cartItemCount +=change ;
112+
if(cartItemCount > 0){
113+
cartItemCountBadge.style.visibility = "visible"
114+
;
115+
cartItemCountBadge.textContent = cartItemCount;
116+
}
117+
else {
118+
cartItemCountBadge.style.visibility ="hidden";
119+
cartItemCountBadge.textContent ="" ;
120+
}
121+
};
122+
const buyNowButton = document.querySelector(".btn-buy");
123+
buyNowButton.addEventListener("click", ()=>{
124+
const cartBoxes = cartContent.querySelectorAll(".cart-box");
125+
if(cartBoxes.length === 0){
126+
alert("Your cart is empty.Please add items to your cart before buying");
127+
return;
128+
}
129+
cartBoxes.forEach(cartBox => cartBox.remove());
130+
cartItemCount = 0 ;
131+
UpdatedCartCount(0);
132+
UpdatedTotalPrice();
133+
alert("thank uh for ur purchase");
134+
})

0 commit comments

Comments
 (0)