-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbrush.js
307 lines (273 loc) · 9.84 KB
/
brush.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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
document.querySelector("div>#offers_img").addEventListener("click", function () {
window.location.assign("offers.html")
})
document.querySelector("#home_page_1").addEventListener("click", function () {
window.location.assign("index.html")
})
document.querySelector("div>#gotocart").addEventListener("click", function () {
window.location.assign("cart.html")
})
document.querySelector("#bottomnav>div>#makeup").addEventListener("click", function () {
window.location.assign("makeup.html")
})
document.querySelector("#bottomnav>div>#brush").addEventListener("click", function () {
window.location.assign("brush.html")
})
document.querySelector("#bottomnav>div>#skincare").addEventListener("click", function () {
window.location.assign("skincare.html")
})
document.querySelector("#bottomnav>div>#trending").addEventListener("click", function () {
window.location.assign("trending.html")
})
document.querySelector("#bottomnav>div>#blog").addEventListener("click", function () {
window.location.assign("https://blog.sugarcosmetics.com/")
})
document.querySelector("#bottomnav>div>#offers").addEventListener("click", function () {
window.location.assign("offers.html")
})
//navbar function
let display_name = localStorage.getItem("name") || ""
if (display_name != "") {
document.getElementById("loginS").innerText = display_name
} else {
document.getElementById("loginS").addEventListener("click", open)
let login = document.getElementById("login")
let button = document.getElementById("login-off")
button.addEventListener("click", close)
function open() {
event.preventDefault()
login.classList.add("login-open")
}
function close() {
event.preventDefault()
login.classList.remove("login-open")
}
// otp request
let mobile = document.getElementById("request-otp")
mobile.addEventListener("click", mobileVerify)
function mobileVerify() {
event.preventDefault()
console.log("inside")
let phoneno = document.getElementById("phone").value
console.log(phoneno)
if (phoneno.length == 10) {
alert("verify your otp")
} else {
alert("enter a valid phone no")
}
}
// "verify"
let verify = document.getElementById("otp-button")
verify.addEventListener("click", Myfunction)
function Myfunction() {
event.preventDefault()
console.log("inside function")
let otp = document.getElementById("otp").value
if (otp == "1234") {
let name = document.getElementById("getname").value
localStorage.setItem("name", name)
localStorage.setItem("status", "online")
window.location.reload()
} else {
alert("wrong otp")
}
}
}
// navbar
let productData = [
{
pname: "SUGAR BLEND FACE BRUSH 003 CONTOUR",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-003Contour.jpg?v=1627659996",
ptag: "BLEND FACE BRUSH 003 CONTOUR",
pid: "b1",
price: "Rs.399",
nprice: 399,
pcateg: "Eyesshadow brush",
prate: "⭐ 4.5(13)", quantity: 0
, fill: "Brush",
},
{
pname: "SUGAR BLEND FACE BRUSH 043 CONTOUR ROUND XL",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-14_1.jpg?v=1627659982",
ptag: "BLEND FACE BRUSH 043 CONTOUR ROUND XL",
pid: "b2", quantity: 0,
price: "Rs.399",
nprice: 399,
pcateg: "Foundation brush",
prate: "⭐ 4.8(6)"
, fill: "Brush",
},
{
pname: "SUGAR BLEND FACE BRUSH 042 CONTOUR ROUND",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-3-min.jpg?v=1627573657",
ptag: "BLEND FACE BRUSH 042 CONTOUR ROUND",
pid: "b3",
price: "Rs.399", quantity: 0,
nprice: 399,
pcateg: "Eyesshadow brush",
prate: "⭐ 4.4(5)"
, fill: "Brush",
},
{
pname: "EYE & FACE COMBO",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/1_1.jpg?v=1630683833",
ptag: "EYES & FACE COMBO",
pid: "b4", quantity: 0,
price: "Rs.649",
nprice: 649,
pcateg: "Eyesshadow brush",
prate: "⭐ 4.5(6)"
, fill: "Brush",
},
{
pname: "SUGAR BLEND TREND FACE BRUSH 006 HIGHLIGHTER",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-006Highlighter.jpg?v=1627660002",
ptag: "BLEND TREND FACE BRUSH -006 HIGHLIGHTER",
pid: "b5", quantity: 0,
price: "Rs.399",
nprice: 399,
pcateg: "Brush combo",
prate: "⭐ 4.7(23)"
, fill: "Brush",
},
{
pname: "SUGAR BLEND TREND DUAL EYESHADOW BRUSH-413 FLAT+ROUND XL",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-13.jpg?v=1627659977",
ptag: "BLEND TREND DUAL EYESHADOW BRUSH-413 FLAT+ROUND XL",
pid: "b6",
nprice: 599,
price: "Rs.599", quantity: 0,
pcateg: "Foundation brush",
prate: "⭐ 5(2)"
, fill: "Brush",
},
{
pname: " Blend Trend Eyeshadow Brush - 041 Flat",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-2-min.jpg?v=1627573652",
ptag: "Blend Trend Eyeshadow Brush - 041 Flat",
pid: "b7",
nprice: 399,
price: "Rs.399", quantity: 0,
pcateg: "Eyesshadow brush",
prate: "⭐ 5(3)", fill: "Brush",
},
{
pname: "Blend Trend Dual Eyeshadow Brush - 412 Flat + Round",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-5-min.jpg?v=1627573639",
ptag: "Blend Trend Dual Eyeshadow Brush - 412 Flat + Round",
pid: "b8", quantity: 0,
price: "Rs.599",
nprice: 599,
pcateg: "Eyesshadow brush",
prate: "⭐ 5(2)", fill: "Brush",
},
{
pname: " Blend Trend Foundation Brush - 052 Kabuki",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFoundationBrush-052Kabuki.jpg?v=1627573664",
ptag: "Blend Trend Foundation Brush - 052 Kabuki",
pid: "b9",
price: "Rs.399", quantity: 0,
nprice: 399,
pcateg: "Foundation brush",
prate: "⭐ 4.8(26)", fill: "Brush",
},
{
pname: " Blend Trend Face Brush - 001 Blush",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-001Blush.jpg?v=1627659984",
ptag: "Blend Trend Face Brush - 001 Blush",
pid: "b10",
price: "Rs.399",
nprice: 399,
pcateg: "Face brush", quantity: 0,
prate: "⭐ 4.9(15)", fill: "Brush",
},
{
pname: "Blend Trend Face Brush - 007 Powder",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-007Powder.jpg?v=1627660008",
ptag: "Blend Trend Face Brush - 007 Powder",
pid: "b11", quantity: 0,
price: "Rs.399",
nprice: 399,
pcateg: "Face brush",
prate: "⭐ 4.9(24)", fill: "Brush",
},
{
pname: " Face Essentials Combo",
pimg: "https://cdn.shopify.com/s/files/1/0906/2558/products/BeginnersEssentialsCombo3-WBGimages.jpg?v=1630683820",
ptag: "Face Essentials Combo",
pid: "b12",
price: "Rs.1499", quantity: 0,
nprice: 1499,
pcateg: "Face brush", fill: "Brush",
prate: "⭐ 5(1)"
},
]
let pdata = document.querySelector("#Product");
let filter = document.querySelector("#Filter");
let cartls = JSON.parse(localStorage.getItem("ADDED")) || [];
displayProducts(productData);
function displayProducts(productData) {
pdata.innerHTML = ""
productData.forEach(function (elem) {
let prds = document.createElement("div");
let img = document.createElement("img");
img.src = elem.pimg;
let tag = document.createElement("h2");
tag.innerText = elem.ptag;
let rate = document.createElement("p");
rate.innerText = elem.price;
let categ = document.createElement("p");
categ.innerText = elem.pcateg;
let rateing = document.createElement("p");
rateing.innerText = elem.prate;
let addtocar = document.createElement("button");
addtocar.innerText = "ADD TO CART";
addtocar.addEventListener("click", function () {
let findpresence = cartls.filter(function (element) {
return element.pid == elem.pid
})
console.log(elem)
if (findpresence.length == 0) {
quantity = 0
elem.quantity++
cartls.push(elem)
console.log(cartls)
localStorage.setItem("ADDED", JSON.stringify(cartls));
}
else {
elem.quantity++
localStorage.setItem("ADDED", JSON.stringify(cartls));
alert(elem.quantity + " Quantity added")
}
})
prds.addEventListener("mouseover", function () {
addtocar.style.backgroundColor = "black"
})
prds.addEventListener("mouseout", function () {
addtocar.style.backgroundColor = "white"
})
prds.append(img, tag, rate, categ, rateing, addtocar);
pdata.append(prds);
})
}
filter.addEventListener("change", function () {
if (filter.value == "All") {
displayProducts(productData)
}
else {
let filterdata = productData.filter(function (elem) {
return elem.fill == filter.value
})
displayProducts(filterdata)
}
})
function addtocarFun(id) {
for (let i = 0; i < cartls.length; i++) {
if (cartls[i].pid == id) {
return false;
}
else {
return true;
}
}
}