<!-- let's creat a timer with js -->
<div class="container">
<div class="groub">
<button disabled="disabled" class="reset">reset timer</button>
<button class="start">Start timer</button>
<button disabled="disabled" class="pause">pause timer</button>
</div>
<div id="hours"> 0 </div>
:
<div id="minutes"> 0 </div>
:
<div id="seconds"> 0 </div>
</div>
*
padding: 0
margin: 0
box-sizing: border-box
font-family: sans-serif
text-transform: uppercase
.container
position: absolute
height: 100%
width: 100%
top: 0
left: 0
background: black
display: flex
align-items: center
justify-content: center
font-family: sans-serif
font-size: 80px
color: white
letter-spacing: 10px
.groub
position: absolute
top: 0
left: 0
width: 100%
padding: 30px 30px
display: flex
align-items: center
justify-content: center
button
position: relative
width: 200px
height: 60px
background: transparent
font-size: 18px
letter-spacing: 3px
color: white
border: 2px solid white
cursor: pointer
transition: 0.4s ease-in-out all
&:hover
background: white
color: black
button[disabled="disabled"]
color: gray
border-color: gray
&:hover
background: transparent
cursor: default
View Compiled
var hours = document.getElementById('hours'),
minutes = document.getElementById('minutes'),
seconds = document.getElementById('seconds'),
container = document.querySelector('.container'),
start = document.querySelector('.start'),
pause = document.querySelector('.pause'),
reset = document.querySelector('.reset'),
count_time = 0;
start.onclick = function(){
var counter = setInterval(function(){
count_time++;
if (count_time > 0) {
seconds.textContent = count_time;
}
if (count_time === 60) {
count_time = 0;
minutes.textContent++;
}
if (minutes.textContent == 60) {
minutes.textContent = 0;
hours.textContent++;
}
}, 1000);
pause.removeAttribute('disabled');
reset.removeAttribute('disabled');
start.setAttribute('disabled', 'disabled');
pause.onclick = function(){
clearInterval(counter);
start.removeAttribute('disabled');
pause.setAttribute('disabled', 'disabled');
}
reset.onclick = function(){
clearInterval(counter);
count_time = 0;
seconds.textContent = 0;
minutes.textContent = 0;
hours.textContent = 0;
start.removeAttribute('disabled');
reset.setAttribute('disabled', 'disabled');
pause.setAttribute('disabled', 'disabled');
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.