-
Notifications
You must be signed in to change notification settings - Fork 45
/
Copy pathshoppingCart.html
121 lines (118 loc) · 4.86 KB
/
shoppingCart.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<style>
#imgPreview {
width:300px;
height:250px;
}
</style>
<script>
var categories = ["Select a Category", "Electronics", "Shoes"];
var electronics = ["Select Electronic Product", "Samsung TV", "Mobile"];
var shoes = ["Select Shoe Product", "Nike Casuals", "Lee Cooper Boot"];
var data = [
{Name: "Samsung TV", Price: 45000.64, Photo: "../Images/tv.jpg"},
{Name: "Mobile", Price: 14000.64, Photo: "../Images/mobile.jpg"},
{Name: "Nike Casuals", Price: 4000.64, Photo: "../Images/shoe.jpg"},
{Name: "Lee Cooper Boot", Price: 2000.64, Photo: "../Images/shoe1.jpg"},
]
function bodyload(){
var lstCategories = document.getElementById("lstCategories");
for(var i=0; i<categories.length; i++) {
var opt = document.createElement("option");
opt.text = categories[i];
opt.value = categories[i];
lstCategories.appendChild(opt);
}
}
function AddProducts(collection) {
var lstProducts = document.getElementById("lstProducts");
lstProducts.innerHTML="";
for(var i=0; i<collection.length; i++) {
var opt = document.createElement("option");
opt.text= collection[i];
opt.value= collection[i];
lstProducts.appendChild(opt);
}
}
function CategoryChanged() {
var selectedCategory = document.getElementById("lstCategories").value;
switch(selectedCategory) {
case "Electronics":
AddProducts(electronics);
break;
case "Shoes":
AddProducts(shoes);
break;
default:
document.getElementById("lstProducts").innerHTML="";
break;
}
}
var price;
function ShowDetails(index){
price=data[index].Price;
document.getElementById("lblName").innerHTML = data[index].Name;
document.getElementById("lblPrice").innerHTML = "₹" + price;
document.getElementById("imgPreview").src= data[index].Photo;
}
function ProductChanged() {
var lstProducts = document.getElementById("lstProducts").value;
switch(lstProducts){
case "Samsung TV":
ShowDetails(0);
break;
case "Mobile":
ShowDetails(1);
break;
case "Nike Casuals":
ShowDetails(2);
break;
case "Lee Cooper Boot":
ShowDetails(3);
break;
}
}
function QuantityChange() {
var txtQty = document.getElementById("txtQty").value;
document.getElementById("lblPrice").innerHTML = "₹" + (txtQty * price);
}
</script>
</head>
<body onload="bodyload()">
<div class="container">
<h2>Amazon Shopping</h2>
<div class="form-group">
<label>Select a Category</label>
<div>
<select onchange="CategoryChanged()" id="lstCategories" class="form-control">
</select>
</div>
</div>
<div class="form-group">
<label>Select a Product</label>
<div>
<select onchange="ProductChanged()" id="lstProducts" class="form-control">
</select>
</div>
</div>
<div class="form-group">
<label>Product Preview</label>
<div class="card">
<div class="card-header">
<h3 id="lblName"></h3>
</div>
<div class="card-body">
<img id="imgPreview" class="img-thumbnail">
<input id="txtQty" onchange="QuantityChange()" type="number" value="1" min="1" max="5"> Quantity
</div>
<div class="card-footer">
<h3 id="lblPrice"></h3>
</div>
</div>
</div>
</div>
</body>
</html>