-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
99 lines (90 loc) · 2.96 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
// Var
var button = document.getElementById("cart-button");
var number = document.querySelector('.number');
var popup = document.querySelector(".popup");
var plus = document.querySelector(".add");
var minus = document.querySelector(".minus");
var background = document.querySelector(".background");
var counter = 0;
// Event Listener
button.addEventListener("click", function (event) {
if (counter == 0) {
number.classList.add("popup-open");
popup.classList.add("popup-open");
setTimeout(increment, 300);
console.log("COUNTER 0");
minus.classList.add("minus-slide");
plus.classList.add("add-slide");
}
if (counter > 0) {
setTimeout(increment, 300);
popup.classList.add("popup-open");
popup.classList.add("popup-two");
setTimeout(function () {
background.classList.add("background-color");
setTimeout(function () {
background.classList.remove("background-color");
}, 740);
}, 739);
setTimeout(function () {
popup.classList.remove("popup-two");
}, 740);
}
})
minus.addEventListener("click", function () {
counter--;
if (counter == 0) {
number.innerHTML = null;
number.classList.remove("popup-open");
popup.classList.remove("popup-open");
popup.classList.remove("popup-two");
background.classList.remove("background-color");
minus.classList.remove("minus-slide");
plus.classList.remove("add-slide");
} else {
popup.classList.add("popup-open");
popup.classList.add("popup-two");
setTimeout(function () {
background.classList.add("background-color");
setTimeout(function () {
background.classList.remove("background-color");
}, 740);
}, 739);
setTimeout(function () {
popup.classList.remove("popup-two");
}, 740);
setTimeout(function () {
number.innerHTML = counter;
}, 650);
}
})
plus.addEventListener("click", function () {
if (counter == 0) {
number.classList.add("popup-open");
popup.classList.add("popup-open");
setTimeout(increment, 640);
console.log("COUNTER 0");
minus.classList.add("minus-slide");
plus.classList.add("add-slide");
}
if (counter > 0) {
setTimeout(increment, 650);
popup.classList.add("popup-open");
popup.classList.add("popup-two");
setTimeout(function () {
background.classList.add("background-color");
setTimeout(function () {
background.classList.remove("background-color");
}, 740);
}, 739);
setTimeout(function () {
popup.classList.remove("popup-two");
}, 740);
}
})
function increment() {
counter = isNaN(counter) ? 0 : counter;
counter++;
number.innerHTML = counter;
}
// Developed By Mohammad Kiaei