vanillaJS-simple-DOM-stopWatch/stop-watch.js at main · rahimuj570/vanillaJS-simple-DOM-stopWatch · 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
// Initial Value
let min = 0;
let sec = 0;
let ms = 0;
let interval;

// ======Display Element========
function getDisplayElem(idClass) {
  const displayElem = document.getElementById(idClass);
  return displayElem;
}

// =========Start Handler========
document.getElementById("start-btn").addEventListener("click", function () {
  clearInterval(interval);
  interval = setInterval(startWatch, 10);
});

// =========Pause Handler========
document.getElementById("pause-btn").addEventListener("click", function () {
  clearInterval(interval);
});

// =========Reset Handler========
document.getElementById("reset-btn").addEventListener("click", function () {
  clearInterval(interval);
  min = 0;
  sec = 0;
  ms = 0;
  getDisplayElem("display-min").innerText = min;
  getDisplayElem("display-sec").innerText = sec;
  getDisplayElem("display-ms").innerText = ms;
});

// ==========Start Stop-Watch Function========
function startWatch() {
  ms++;
  if (ms <= 9) {
    getDisplayElem("display-ms").innerText = "0" + ms;
  }
  if (ms > 9) {
    getDisplayElem("display-ms").innerText = ms;
  }
  if (ms > 100) {
    ms = 0;
    sec++;
    getDisplayElem("display-ms").innerText = ms;
    getDisplayElem("display-sec").innerText = sec;
  }
  if (sec === 60) {
    sec = 0;
    min++;
    getDisplayElem("display-min").innerText = min;
  }
}