variable-project/stopWatch.js at master · marambaou/variable-project · 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
const startStopBtn = document.querySelector('#startStopBtn');
const resetBtn = document.querySelector('#resetBtn');

let seconds = 0;
let minutes = 0;
let hours = 0;

let leadingSeconds =0;
let leadingMinutes =0;
let leadingHours =0;

let timerInterval = null;
let timeStatus = "stopped";


function stopWatch() {
    seconds++;

    if(seconds/60 ===1) {
        seconds = 0;
        minutes ++;

        if(minutes / 60 === 1){
            minutes = 0;
            hours++;
        }

    }
    if(seconds < 10){
        leadingSeconds = "0" + seconds.toString()
    }else {
        leadingSeconds = seconds;
    }
    if(minutes < 10){
        leadingMinutes = "0" + minutes.toString()
    }else {
        leadingMinutes = minutes;
    }

    if(hours < 10){
        leadingHours = "0" + hours.toString()
    }else {
        leadingHours = hours;
    }

    let displayTimer = document.getElementById('timer').innerText = leadingHours + ":" + leadingMinutes + ":" + leadingSeconds;
}
startStopBtn.addEventListener('click', function(){

    if(timeStatus === "stopped") {
    timerInterval = window.setInterval(stopWatch, 1000);
    document.getElementById('startStopBtn').innerHTML = `<i class = "fa-solid fa-pause" id="pause"></i>`;
    timeStatus = "started";
}else {
    window.clearInterval(timerInterval);
    document.getElementById('startStopBtn').innerHTML = `<i class = "fa-solid fa-play" id = "play"></i>`;
    timeStatus = "stopped";
    alert('The watch has stoped, so take a rest');

}


});

resetBtn.addEventListener('click', function(){
    window.clearInterval(timerInterval);
    seconds = 0;
    minutes = 0;
    hours = 0;

    document.getElementById('timer').innerHTML = "00:00:00";
})