GUI-clock-stopwatch-timer/script.js at master · raghupviyer/GUI-clock-stopwatch-timer · 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
/*------clock------*/

function time() {
    var date = new Date;
    var hrs = date.getHours();
    var mins = date.getMinutes();
    var secs = date.getSeconds();
    var hrsTimeClock = document.getElementById("yellow-hour-time");
    var minTimeClock = document.getElementById("black-minute-time");
    var secTimeClock = document.getElementById("red-second-time");

    if (hrs > 12) {
        hrs = hrs - 12;
    }
    if (hrs == 0) {
        hrs = 12;
    }
    if (hrs < 10){
        hrs = `0${hrs}`;
    }
    if (mins < 10) {
        mins = `0${mins}`;
    }
    if (secs < 10) {
        secs = `0${secs}`;
    }
    hrsTimeClock.style.transform = `rotate(${(hrs * 30)-90}deg)`;
    minTimeClock.style.transform = `rotate(${(mins * 6)-90}deg)`;
    secTimeClock.style.transform = `rotate(${(secs * 6)-90}deg)`;
    document.getElementById("time-border").innerHTML = `${hrs} : ${mins} : ${secs}`;
}
time();
setInterval(time, 500);

/*------stopwatch------*/

var miliseconds = 0;
var seconds = 0;
var minutes = 0;
var interval;
var minStopwatchClock = document.getElementById("yellow-minute-stopwatch");
var secStopwatchClock = document.getElementById("black-second-stopwatch");
var milisecStopwatchClock = document.getElementById("red-milisecond-stopwatch");


document.getElementById("start").addEventListener("click", () => {
    interval = setInterval(stopwatch, 10);
});
document.getElementById("stop").addEventListener("click", () => {
    clearInterval(interval)
});
document.getElementById("reset").addEventListener("click", () => {
    miliseconds = 0;
    seconds = 0;
    minutes = 0;

    minStopwatchClock.style.transform = `rotate(-90deg)`;
    secStopwatchClock.style.transform = `rotate(-90deg)`;
    milisecStopwatchClock.style.transform = `rotate(-90deg)`;
    document.getElementById("stopwatch").innerHTML = `${minutes} : ${seconds} : ${miliseconds}`;
});
function stopwatch() {
    miliseconds++;
    if (miliseconds > 100) {
        miliseconds = 0;
        seconds++;
    }
    if (seconds > 60) {
        seconds = 0;
        minutes++;
    }

    minStopwatchClock.style.transform = `rotate(${(minutes * 6) - 90}deg)`;
    secStopwatchClock.style.transform = `rotate(${(seconds * 6) - 90}deg)`;
    milisecStopwatchClock.style.transform = `rotate(${(miliseconds * 6) - 90}deg)`;
    document.getElementById("stopwatch").innerHTML = `${minutes} : ${seconds} : ${miliseconds}`;
}

/*------timer------*/

var timer = document.getElementById("timer-display");
var timerStart = document.getElementById("timer-start-button");
var min = document.getElementById("mins");
var sec = document.getElementById("secs");
var _min ;
var _sec;
var Interval;
var result = document.getElementById("result");
var minTimerClock = document.getElementById("black-minute-timer");
var secTimerClock = document.getElementById("red-second-timer");


timerStart.addEventListener("click", () => {
    _min = min.value;
    _sec = sec.value;
    Interval = setInterval(timerstart,1000);
})

function timerstart() {
    if (_min > 0) {
        if (_sec < 0) {
            _sec = 59;
            _min--;
        }
        minTimerClock.style.transform = `rotate(${(_min * 6) - 90}deg)`;
        secTimerClock.style.transform = `rotate(${(_sec * 6) - 90}deg)`;
        timer.innerHTML = `${_min} : ${_sec}`;
        result.innerHTML = `clock's ticking`;
        _sec--;
    }
    else if (_min == 0 & _sec > 0) {
        minTimerClock.style.transform = `rotate(${(_min * 6) - 90}deg)`;
        secTimerClock.style.transform = `rotate(${(_sec * 6) - 90}deg)`;
        timer.innerHTML = `${_min} : ${_sec}`;
        _sec--;
        result.innerHTML = `clock's ticking`;
    }
    else {
        clearInterval(Interval);
        _sec = 0;
        minTimerClock.style.transform = `rotate(${(_min * 6) - 90}deg)`;
        secTimerClock.style.transform = `rotate(${(_sec * 6) - 90}deg)`;
        timer.innerHTML = `${_min} : ${_sec}`;
        result.innerHTML = `time's up`;
    }
}