-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
192 lines (137 loc) · 5.52 KB
/
app.js
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
const searchProducts = () => {
fetch('https://fakestoreapi.com/products/')
.then(res => res.json())
.then(data => showDetails(data))
}
const showDetails = (products) => {
const details = document.getElementById('display-card');
products.forEach(element => {
console.log(element)
const ratingStar = ratings(element.rating.rate);
const div = document.createElement('div');
div.classList.add('col')
div.innerHTML = `
<div class="card ms-4 border-0 shadow h-100 product">
<div class="p-5">
<img src="${element.image}" class="card-img-top" alt="..." height=300 >
</div>
<div class="card-body">
<h5 class="card-title text-center">${element.title}</h5>
<h5 class="card-text text-center fw-bold">$<span class="sp fw-bold">${element.price}</span></h5>
<h5 class="card-text text-center"><span class="sp fw-bold">${ratingStar}</span></h5>
<p class="card-text text-center">${element.description}</p>
</div>
<div class="footer mx-auto">
<button class="btn btn-secondary" onclick="addToCard(${element.id},${element.price})" >Add to Card</button>
</div>
</div>
`
details.appendChild(div);
/*Add to card a click korle addtocard method call hobe element id and element price diye
parameter hishebe element id & price jacche
*/
});
}
let count = 0;
const addToCard = (id, price, newPrice) => {
/* element id & price ekhane ashbe
newprice er value by default zero
*/
count = count + 1;
//addtocard a click korle total prodcut er value barbe
document.getElementById('total-products').innerHTML = count;
//innerhtml er shahajje count er value total product a rekhe dicchi
updatePrice(price);
//updateprice method call hobe
total();
}
const total = () => {
const price = parseFloat(document.getElementById('price').innerText);
const deliver = parseFloat(document.getElementById('delivery-charge').innerText);
const shipping = parseFloat(document.getElementById('shipping-charge').innerText);
//price,delivery,shipping get korbo
const total = price + deliver + shipping;
//price,delivery,shipping jog korbo
document.getElementById('total').innerText = total.toFixed(2)
//innertext er maddhome total a set korbo
TaxCharge(total);
//taxcharge method call hobe
const tax = parseFloat(document.getElementById('tax-charge').innerText);
//taxcharge er value get korbo
document.getElementById('taxtotal').innerText = (total + tax).toFixed(2);
//total price r tax jog korbo
}
const updatePrice = (price) => {
const oldPrice = document.getElementById('price').innerText;
//bortoman price ta get krtesi
const oldPriceFloat = parseFloat(oldPrice);
//float a conver hcche
const newPrice = price + oldPriceFloat;
//puron price er shthe newprice add hobe
document.getElementById('price').innerText = newPrice.toFixed(2);//doshomiker por kotoghor ta dkhabe
DeliveryCharge(newPrice);
//deliverycharge method ta call hobe
ShippingCharge(newPrice);
}
const TaxCharge = (newPrice) => {
document.getElementById('tax-charge').innerText = (newPrice * 0.15).toFixed(2);
}
const DeliveryCharge = (newPrice) => {
let DeliveryCharge;
if (newPrice <= 500) {
return document.getElementById('delivery-charge').innerText = 0;
//return kora mane hcche pathacche
}
if (newPrice > 500 && newPrice <= 800) {
document.getElementById('delivery-charge').innerText = 100
}
else if (newPrice > 800 && newPrice <= 1000) {
document.getElementById('delivery-charge').innerText = 150
} else if (newPrice > 1000) {
document.getElementById('delivery-charge').innerText = 200
}
}
const ShippingCharge = (newPrice) => {
let ShippingCharge;
if (newPrice <= 500) {
return document.getElementById('shipping-charge').innerText = 0;
}
if (newPrice > 500 && newPrice <= 800) {
document.getElementById('shipping-charge').innerText = 100
}
else if (newPrice > 800 && newPrice <= 1000) {
document.getElementById('shipping-charge').innerText = 150
} else if (newPrice > 1000) {
document.getElementById('shipping-charge').innerText = 200
}
}
const ratings = (rate) => {
if (rate >= 4) {
return star = ` <h6><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> ${rate}</h6>`
}
else if (rate >= 3 && rate < 4) {
return star = ` <h6><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> ${rate}</h6>`
}
else if (rate >= 2 && rate < 3) {
return star = ` <h6><i class="fas fa-star"></i><i class="fas fa-star"></i> ${rate}</h6>`
}
else {
return star = ` <h6><i class="fas fa-star"></i> ${rate}</h6>`
}
}
const orderProducts = () => {
const details = document.getElementById('details1');
details.classList.remove("hidden");
//by default hidden ta shore jabe
details.textContent = '';
const totalPrice = document.getElementById('taxtotal').innerText;
const div = document.createElement('div');
div.innerHTML = ` <div class="alert alert-success alert-dismissible fade in " id="detailsHidden">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<h4>Your total Shopping : $${totalPrice}</h4>
<p>Thanks for Shopping With Us!!!!!</p>
</div>
`
details.appendChild(div)
}
searchProducts();