Skip to content

Commit 036aa6a

Browse files
Japoncio3kJaponcio3k
committed
Created Timer
1 parent fbff446 commit 036aa6a

3 files changed

Lines changed: 170 additions & 0 deletions

File tree

‎Timer/beep-06.mp3‎

8.62 KB
Binary file not shown.

‎Timer/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Timer</title>
7+
<style>
8+
div#timerContainer{
9+
display: flex;
10+
width: 450px;
11+
height: 150px;
12+
flex-wrap: wrap;
13+
}
14+
div#timerContainer > div{
15+
width: 32%;
16+
padding: 0;
17+
border:1px solid black;
18+
font-size:110px;
19+
text-align: center;
20+
}
21+
div#timerContainer > div > input{
22+
width: 100%;
23+
height: 100%;
24+
padding: 0;
25+
margin: 0;
26+
font-size:110px;
27+
text-align: center;
28+
-moz-appearance: textfield;
29+
border: 0;
30+
}
31+
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{
32+
-webkit-appearance: none;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<div id='timerContainer'>
38+
<div id='hoursContainer'><input id='hours' value=00 type=number><div id='hoursShow'></div></div>
39+
<div id='minutesContainer'><input id='minutes' value=00 type=number><div id='minutesShow'></div></div>
40+
<div id='secondsContainer'><input id='seconds' value=00 type=number><div id='secondsShow'></div></div>
41+
</div>
42+
<button id=start>Start Timer</button>
43+
</body>
44+
<script src='main.js'></script>
45+
</html>

‎Timer/main.js‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
var time={
2+
h:0,
3+
m:0,
4+
s:0
5+
}
6+
var temporaryTime={
7+
h:0,
8+
m:0,
9+
s:0
10+
}
11+
const numbersTimer = (el) => {
12+
if(el.value.length<2){
13+
el.value='0'+el.value;
14+
}else if(el.value.length>2){
15+
el.value=el.value.substring(1,3)
16+
}
17+
// el.value.replace()
18+
}
19+
var timer;
20+
21+
const attDivs = () =>{
22+
if(time.h < 10){
23+
document.getElementById('hoursShow').innerHTML = '0' + time.h;
24+
}else{
25+
document.getElementById('hoursShow').innerHTML=time.h;
26+
}
27+
if(time.m < 10){
28+
document.getElementById('minutesShow').innerHTML = '0' + time.m;
29+
}else{
30+
document.getElementById('minutesShow').innerHTML=time.m;
31+
}
32+
if(time.s < 10){
33+
document.getElementById('secondsShow').innerHTML = '0' + time.s;
34+
}else{
35+
document.getElementById('secondsShow').innerHTML=time.s;
36+
}
37+
}
38+
39+
document.getElementById('hours').onkeypress = () => {
40+
setTimeout(() => {
41+
numbersTimer(document.getElementById('hours'));
42+
if(document.getElementById('hours').value<0){
43+
document.getElementById('hours').value='00'
44+
}
45+
},5)
46+
}
47+
document.getElementById('minutes').onkeypress = () => {
48+
setTimeout(() => {
49+
numbersTimer(document.getElementById('minutes'));
50+
if(document.getElementById('minutes').value>59){
51+
document.getElementById('minutes').value=59
52+
}else if(document.getElementById('minutes').value<0){
53+
document.getElementById('minutes').value='00'
54+
}
55+
},5)
56+
}
57+
document.getElementById('seconds').onkeypress = () => {
58+
setTimeout(() => {
59+
numbersTimer(document.getElementById('seconds'));
60+
if(document.getElementById('seconds').value>59){
61+
document.getElementById('seconds').value=59
62+
}else if(document.getElementById('seconds').value<0){
63+
document.getElementById('seconds').value='00'
64+
}
65+
},5)
66+
}
67+
68+
document.getElementById('start').onclick = () => {
69+
startTimer()
70+
}
71+
const startTimer = () => {
72+
73+
time={
74+
h:parseInt(document.getElementById('hours').value),
75+
m:parseInt(document.getElementById('minutes').value),
76+
s:parseInt(document.getElementById('seconds').value)
77+
}
78+
if(time.s === 0 && time.m === 0 && time.h ===0){
79+
return;
80+
}
81+
timer = setInterval(() => {
82+
time.s = time.s - 1;
83+
if(time.s === 0){
84+
if(time.m === 0){
85+
let audio = new Audio('beep-06.mp3');
86+
audio.play()
87+
document.getElementById('stop').click();
88+
return;
89+
}
90+
time.m = time.m - 1;
91+
time.s = 59
92+
if(time.m === 0){
93+
if(time.h === 0){
94+
let audio = new Audio('beep-06.mp3');
95+
audio.play()
96+
document.getElementById('stop').click();
97+
return;
98+
}
99+
time.h = time.h - 1;
100+
time.m = 59
101+
}
102+
}
103+
attDivs();
104+
}, 1000)
105+
document.getElementById('hours').style.display = 'none';
106+
document.getElementById('minutes').style.display = 'none';
107+
document.getElementById('seconds').style.display = 'none';
108+
attDivs();
109+
document.getElementById('start').innerHTML = "Stop timer";
110+
document.getElementById('start').id = "stop";
111+
document.getElementById('stop').onclick = () => {
112+
document.getElementById('hoursShow').innerHTML = ''
113+
document.getElementById('minutesShow').innerHTML = ''
114+
document.getElementById('secondsShow').innerHTML = ''
115+
document.getElementById('hours').style.display = 'block';
116+
document.getElementById('minutes').style.display = 'block';
117+
document.getElementById('seconds').style.display = 'block';
118+
clearInterval(timer);
119+
document.getElementById('stop').innerHTML = "Start timer";
120+
document.getElementById('stop').id = "start";
121+
document.getElementById('start').onclick = () => {
122+
startTimer()
123+
}
124+
}
125+
}

0 commit comments

Comments
 (0)