-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
109 lines (98 loc) · 3.1 KB
/
script.js
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
const progressBar = document.querySelector(".outerRing"),
minElem = document.querySelector("#minutes"),
secElem = document.querySelector("#seconds"),
startStop = document.querySelector("#stsp"),
setting = document.querySelector("#setting");
let minutes = document.querySelector("#minutes").innerHTML,
seconds = document.querySelector("#seconds").innerHTML,
progress = null,
progressStart = 0,
progressEnd = parseInt(minutes) * 60 + parseInt(seconds),
speed = 1000,
degTravel = 360 / progressEnd,
toggleSettings = false,
secRem = 0,
minRem = 0;
function progressTrack() {
progressStart ++;
secRem = Math.floor((progressEnd - progressStart) % 60);
minRem = Math.floor((progressEnd - progressStart) / 60);
secElem.innerHTML = secRem.toString().length == 2 ? secRem : `0${secRem}`;
minElem.innerHTML = minRem.toString().length == 2 ? minRem : `0${minRem}`;
progressBar.style.background = `conic-gradient(
#9d0000 ${progressStart * degTravel}deg,
#17171a ${progressStart * degTravel}deg
)`;
if(progressStart == progressEnd){
progressBar.style.background = `conic-gradient(
#00aa51 360deg,
#00aa51 360deg
)`;
clearInterval(progress);
startStop.innerHTML = "START";
progress = null;
progressStart = 0;
}
}
function startStopProgress() {
if(!progress){
progress = setInterval(progressTrack, speed);
} else{
clearInterval(progress);
progress = null;
progressBar.style.background = `conic-gradient(
#17171a 360deg,
#17171a 360deg
)`;
}
}
function resetValues() {
if (progress){
clearInterval(progress);
}
minutes = document.querySelector("#minutes").innerHTML;
seconds = document.querySelector("#seconds").innerHTML;
toggleSettings = false;
minElem.contentEditable = false;
minElem.style.borderBottom = `none`;
secElem.contentEditable = false;
secElem.style.borderBottom = `none`;
progress = null;
progressStart = 0;
progressEnd = parseInt(minutes) * 60 + parseInt(seconds);
degTravel = 360 / progressEnd;
progressBar.style.background = `conic-gradient(
#17171a 360deg,
#17171a 360deg
)`
};
startStop.onclick = function (){
if(startStop.innerHTML === "START") {
if(!(parseInt(minutes) === 0 && parseInt(seconds) === 0)){
startStop.innerHTML = "STOP";
startStopProgress();
} else{
alert("Por favor coloque um valor de tempo valido!");
}
} else{
startStop.innerHTML = "START";
startStopProgress();
}
}
setting.onclick = function(){
if(!toggleSettings){
toggleSettings = true;
minElem.contentEditable = true;
minElem.style.borderBottom = `1px dashed #ffffff50`;
secElem.contentEditable = true;
secElem.style.borderBottom = `1px dashed #ffffff50`;
} else{
resetValues();
}
}
minElem.onblur = function(){
resetValues();
}
secElem.onblur = function(){
resetValues();
}