-
Notifications
You must be signed in to change notification settings - Fork 0
/
cart.html
129 lines (95 loc) · 3.28 KB
/
cart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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" />
<title>Cart Page</title>
<link rel="stylesheet" href="style.css">
<style>
/* Write all necessery css here */
</style>
</head>
<body>
<div id="nav">
<div id="upperline">
<img width="14%" src="https://nms-assets.s3-ap-south-1.amazonaws.com/images/cms/aw_rbslider/slides/1663609483_netmeds-new-logo.svg" alt="logo">
<input type="text" placeholder=" Search for medicine and wellness products..."/>
<p>Upload</p>
<a href="./signin.html">Sign in / Sign up</a>
</div>
<h2 style="margin-top: 130px;margin-left: 15%;">Order Summary</h2>
<div id="parent">
<div id="cart-container">
</div>
<div id="child1">
<h4>PAYMENT DETAILS</h4>
<h4 id="total">MRP Total :- ₹ <span id="cart-total">0</span></h4>
<button onclick="myfun()">BUY NOW</button>
</div>
<!-- Here Append All the cart Products -->
</div>
</body>
<script>
// Write all necessery JS here
let cartProduct = JSON.parse(localStorage.getItem("cart")) || [];
function getData(){
let TotalPrice = 0;
document.getElementById("cart-container").innerText = "";
cartProduct.map((elem,index)=>{
let div = document.createElement("div");
let div2 = document.createElement("div");
div.setAttribute("id","cartwala")
div2.setAttribute("id","innercartwala")
let img = document.createElement("img");
img.src = elem.image;
let name = document.createElement("h2");
name.innerText = elem.name;
let price = document.createElement("h3");
price.innerText = "₹"+elem.price;
let incButton = document.createElement("button");
incButton.innerText = "+"
incButton.addEventListener("click",function(){
incQuantity(elem,index);
})
let AddButton = document.createElement("span");
AddButton.innerText = elem.quantity;
let decButton = document.createElement("button");
decButton.innerText = "-";
decButton.addEventListener("click",function(){
decQuantity(elem,index);
})
let remButton = document.createElement("button");
remButton.innerText = "REMOVE";
remButton.setAttribute("id","buttonwala")
remButton.addEventListener("click",function(){
remProduct(index);
})
div2.append(name,price,incButton,AddButton,decButton,remButton)
div.append(img,div2);
document.getElementById("cart-container").append(div)
TotalPrice = TotalPrice+elem.price*elem.quantity
})
document.getElementById("cart-total").innerText = TotalPrice;
}
function remProduct(index){
cartProduct.splice(index,1)
localStorage.setItem("cart",JSON.stringify(cartProduct));
getData();
}
function incQuantity(elem,index){
cartProduct[index].quantity = elem.quantity+1;
localStorage.setItem("cart",JSON.stringify(cartProduct));
getData();
}
function decQuantity(elem,index){
cartProduct[index].quantity = elem.quantity-1;
localStorage.setItem("cart",JSON.stringify(cartProduct));
getData();
}
getData();
function myfun(){
alert("Thankyou for purchasing!!!")
}
</script>
</html>