counter/counter.js at main · devJudicael/counter · 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
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


var increase = document.querySelector(".up")
var decrease = document.querySelector(".down")
var rounded = document.querySelector(".rounded")
var p = document.querySelector("p")
var button = document.querySelectorAll("button")
var number=0;
var gray = document.querySelector(".gray")


let interval;


let interval2;


// la fonction stop permet de bloquer les processus d'incrementation ou de decrementation
function stop() {
    clearInterval (interval)
    interval = null;


    clearInterval (interval2)
    interval2 = null;
}


// la fonction incrementation verifie si le nombre est inférieur à 100 et fait +1 elle appelle également la fonction classes

function incrementation() {

    classes()


  if (number < 100) {
    number+=1;

p.textContent=number
  }

  else {
    stop()
}


}


// la fonction decrementation verifie si le nombre est supérieur à -100 et fait -1 elle appelle également la fonction classes
function decrementation() {

    classes()


  if (number > -100) {
    number-=1;

p.textContent=number
  }

  else {
    stop()
}


}


// lorsque le click est écouté sur increase on vérifie si un processus d'incrementation est deja lancé
//si non alors on lance en appelant successivement la fonction incrementation à intervalle de 200ms

increase.addEventListener("click", ()=>{


if (!interval) {
    interval =  setInterval( incrementation , 200)
}

clearInterval (interval2)
    interval2 = null;


})


// lorsque le click est écouté sur decrease on vérifie si un processus de decrementation est deja lancé
//si non alors on lance en appelant successivement la fonction decrementation à intervalle de 200ms


decrease.addEventListener("click" , ()=>{


    if (!interval2) {
        interval2 = setInterval (decrementation , 200)

    }

    clearInterval (interval)
    interval = null;

})


// au click de gray , si l'un des processus d'incrementation ou de decrementation est en cours , alors appeler la fonction stop ainsi que la fonction classes

gray.addEventListener ("click" , ()=>{

    classes()
    if (interval || interval2) {

        stop()
    }
})


// la fonction classes verifie la valeur de number en en fonction , ajoute soit une bordure rouge ou verte ou conserve celle d'origine


function classes() {
    switch (true) {
        case (number>0):
            rounded.classList.add ("green")

            break;


            case (number<0):
                rounded.classList.remove ("green")
                rounded.classList.add("red")
                break;

            default:
                rounded.classList.remove("green")
                rounded.classList.remove("red")


    }
}