Skip to content

Commit 67cd7db

Browse files
coderzamancoderzaman
committed
Project Shooping Cart
1 parent bcbf6c8 commit 67cd7db

File tree

3 files changed

+297
-0
lines changed

3 files changed

+297
-0
lines changed

‎24. Project(Shooping Cart)/img/image.png

357 KB
Loading

‎24. Project(Shooping Cart)/index.html

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Shooping Cart</title>
8+
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
9+
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap" rel="stylesheet">
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
12+
<style>
13+
.cart-head-left {
14+
font-family: "Caveat", cursive;
15+
font-weight: 700;
16+
}
17+
18+
.cart-list {
19+
background-color: beige;
20+
width: 300px;
21+
position: fixed;
22+
inset: 0 0 0 auto;
23+
z-index: 999999999;
24+
display: none;
25+
26+
}
27+
28+
.btn_close {
29+
width: 100%;
30+
border-radius: 0;
31+
position: absolute;
32+
bottom: 0;
33+
height: 50px;
34+
35+
}
36+
37+
.del_btn {
38+
float: right;
39+
border-radius: 0;
40+
height: 30px;
41+
font-size: 16;
42+
padding: 0 10px;
43+
44+
}
45+
46+
.sucess, .error{
47+
color: white;
48+
padding: 5px;
49+
margin: 5px 0px 15px 0px;
50+
}
51+
52+
.sucess{
53+
background: green;
54+
}
55+
56+
.error{
57+
background: red;
58+
}
59+
60+
</style>
61+
</head>
62+
63+
64+
65+
66+
<body>
67+
<div class="container-fluild bg-warning ">
68+
<div class="container ">
69+
<div class="row">
70+
<div class="col-8 cart-head-left py-3">
71+
<h4 class="fs-1">Shooping Cart</h4>
72+
</div>
73+
<div class="col-4 py-4">
74+
<div class="align-middle" style="float: right;">
75+
<i type="button" class=" fa-solid fa-cart-shopping
76+
btn btn-dark position-relative" id="cart-btn">
77+
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="number_of_item">0</span>
78+
</i>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
85+
86+
<div class="cart-list" id="cart">
87+
<h3 class="p-4">Cart</h3>
88+
<ul class="list-group" id="cart_list">
89+
90+
</ul>
91+
<button class="btn btn-dark btn_close" id="cart_close">Close</button>
92+
</div>
93+
94+
95+
<div class="container mt-5">
96+
<div class="row alertMessage" id="all_carts">
97+
<div class="col-3">
98+
<div class="card text-center">
99+
<img src="img/image.png" class="card-img-top" alt="...">
100+
<div class="card-body">
101+
<p hidden>Product id:<span id="productId">1</span></p>
102+
<h5 class="card-title" id="product_name">Product 1</h5>
103+
<p class="card-text">Price: <span id="productPrice">400</span></p>
104+
<a href="#" class="btn btn-primary" id="add-cart">Add To Cart</a>
105+
</div>
106+
</div>
107+
</div>
108+
<div class="col-3">
109+
<div class="card text-center">
110+
<img src="img/image.png" class="card-img-top" alt="...">
111+
<div class="card-body">
112+
<p hidden>Product id:<span span id="productId">2</span></p>
113+
<h5 class="card-title" id="product_name">Product 2</h5>
114+
<p class="card-text">Price: <span id="productPrice">500</span></p>
115+
<a href="#" class="btn btn-primary" id="add-cart">Add To Cart</a>
116+
</div>
117+
</div>
118+
</div>
119+
<div class="col-3">
120+
<div class="card text-center">
121+
<img src="img/image.png" class="card-img-top" alt="...">
122+
<div class="card-body">
123+
<p hidden>Product id:<span span id="productId">3</span></p>
124+
<h5 class="card-title" id="product_name">Product 3</h5>
125+
<p class="card-text">Price: <span id="productPrice">600</span></p>
126+
<a href="#" class="btn btn-primary" id="add-cart">Add To Cart</a>
127+
</div>
128+
</div>
129+
</div>
130+
<div class="col-3">
131+
<div class="card text-center">
132+
<img src="img/image.png" class="card-img-top" alt="...">
133+
<div class="card-body">
134+
<p hidden>Product id:<span span id="productId">4</span></p>
135+
<h5 class="card-title" id="product_name">Car</h5>
136+
<p class="card-text">Price: <span id="productPrice">700</span></p>
137+
<a href="#" class="btn btn-primary" >Add To Cart</a>
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
</div>
143+
144+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
145+
<script src="js/script.js"></script>
146+
<p></p>
147+
</body>
148+
149+
</html>

‎24. Project(Shooping Cart)/js/script.js

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
class UI {
2+
static addItem(Item) {
3+
let listItem = document.createElement('li');
4+
listItem.classList = 'list-group-item';
5+
listItem.innerHTML = `
6+
<p hidden>Product id:<span id="productId">${Item.id}</span></p>
7+
<h6 style="display: inline-block;">${Item.name}</h6>
8+
<button class="btn btn-danger del_btn">Delete</button>
9+
<hr>
10+
<p style="font-size: 14px;">Price: ${Item.price}</p>
11+
`
12+
cart_list.appendChild(listItem);
13+
}
14+
15+
static showAlert(message, className) {
16+
let div = document.createElement('div');
17+
div.classList = className;
18+
div.appendChild(document.createTextNode(message));
19+
let parenElement = document.querySelector('.alertMessage');
20+
parenElement.insertBefore(div, parenElement.firstChild);
21+
22+
setTimeout(() => {
23+
document.querySelector(`.${className}`).remove();
24+
}, 1000)
25+
}
26+
27+
}
28+
29+
class LocalStorage{
30+
static addItemToStorage(id, name, price) {
31+
32+
let cartList;
33+
let Item = {
34+
id: id,
35+
name: name,
36+
price: price
37+
}
38+
39+
if (localStorage.getItem('cartList') === null) {
40+
cartList = [];
41+
} else {
42+
cartList = JSON.parse(localStorage.getItem('cartList'));
43+
}
44+
45+
cartList.push(Item);
46+
cartItems.innerText = `${cartList.length}`;
47+
localStorage.setItem('cartList', JSON.stringify(cartList));
48+
UI.showAlert("Added Successfully", 'sucess');
49+
50+
}
51+
52+
static getCartList(){
53+
let cartList;
54+
if (localStorage.getItem('cartList') === null) {
55+
cartList = [];
56+
} else {
57+
cartList = JSON.parse(localStorage.getItem('cartList'));
58+
}
59+
cartItems.innerText = `${cartList.length}`;
60+
61+
cartList.forEach(element => {
62+
UI.addItem(element);
63+
});
64+
}
65+
66+
static removeItemFromStorage(id){
67+
let cartList = JSON.parse(localStorage.getItem('cartList'));
68+
69+
cartList.forEach((item, index)=>{
70+
if(item.id == id){
71+
cartList.splice(index,1);
72+
}
73+
})
74+
75+
cartItems.innerText = `${cartList.length}`;
76+
localStorage.setItem('cartList', JSON.stringify(cartList));
77+
UI.showAlert("Remove Successfully", 'error');
78+
79+
}
80+
81+
static productIsAlreadyAdded(productId){
82+
console.log("Receive Parameter: ", productId);
83+
let cartList = JSON.parse(localStorage.getItem('cartList'));
84+
85+
if(cartList !== null){
86+
for(let item of cartList){
87+
if(item.id == productId){
88+
return true;
89+
}
90+
}
91+
}
92+
93+
return false;
94+
95+
96+
97+
}
98+
}
99+
100+
const cart_btn = document.getElementById('cart-btn');
101+
const cart = document.getElementById('cart');
102+
const close_cart = document.getElementById('cart_close');
103+
const all_carts = document.getElementById('all_carts');
104+
const cart_list = document.getElementById('cart_list');
105+
const del_cart = document.getElementById('cart_list');
106+
const cartItems = document.getElementById('number_of_item');
107+
cart_btn.addEventListener('click', function (e) {
108+
cart.style.display = 'block';
109+
});
110+
111+
close_cart.addEventListener('click', function (e) {
112+
cart.style.display = 'none';
113+
})
114+
115+
all_carts.addEventListener('click', addToCart);
116+
cart_list.addEventListener('click', delete_cart);
117+
document.addEventListener('DOMContentLoaded',LocalStorage.getCartList);
118+
119+
120+
121+
122+
123+
function addToCart(e) {
124+
if (e.target.hasAttribute('href')) {
125+
let id = e.target.parentElement.querySelector('#productId').textContent;
126+
let name = e.target.parentElement.querySelector('#product_name').textContent;
127+
let price = e.target.parentElement.querySelector('#productPrice').textContent;
128+
129+
130+
if(LocalStorage.productIsAlreadyAdded(id)){
131+
UI.showAlert("Already Added", 'error');
132+
}else{
133+
UI.addItem({name, price});
134+
LocalStorage.addItemToStorage(id, name, price);
135+
}
136+
137+
138+
}
139+
}
140+
141+
142+
function delete_cart(e){
143+
if(e.target.classList.contains('btn-danger')){
144+
let id = e.target.parentElement.querySelector('#productId').textContent;
145+
LocalStorage.removeItemFromStorage(id);
146+
e.target.parentElement.remove();
147+
};
148+
}

0 commit comments

Comments
 (0)