SimpleCounter/app.js at main · anasxaz/SimpleCounter · GitHub

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
let count = 0;

const decrease = document.querySelector(".decrease");
const reset = document.querySelector(".reset");
const increase = document.querySelector(".increase");
const value = document.getElementById("value");

decrease.addEventListener("click", () => {
    count--;
    value.textContent = count;
    value.style.color = "red";
});
reset.addEventListener("click", () => {
    count = 0;
    value.textContent = count;
    value.style.color = "";
});
increase.addEventListener("click", () => {
    count++;
    value.textContent = count;
    value.style.color = "green";
});


//NOTE - il y a une autre méthode : a good one to practice currentTarget and classList.
//séléctionner tous les boutons dans un seul coup.
// const btns = document.querySelectorAll(".btn");
// const value = document.getElementById("value");

// btns.forEach((btn) => {
//     btn.addEventListener('click', (e) => {
//         const val = e.currentTarget.classList;
//         if (val.contains('decrease')) {
//             count--;
//             value.textContent = count;
//             value.style.color = "red";
//         }
//         else if (val.contains('reset')) {
//             count = 0;
//             value.textContent = count;
//             value.style.color = "";
//         }
//         if (val.contains('increase')) {
//             count++;
//             value.textContent = count;
//             value.style.color = "green";
//         }
//     })
// })