JS Stopwatch
HTML
<div class="timer">
<h3>3 Minutes Stop Watch</h3>
<p> <span id="min">0</span>min <span id="sec">0</span>sec</p>
<p>
<button id="start">Start</button>
<button id="stop" disabled>Stop</button>
<button id="reset">Reset</button>
</p>
</div>
CSS
.timer {
width: 360px;
height: 680px: margin: 0 auto;
padding: 20px;
border: 1px solid transparent;
background: rgba(26, 188, 156,1.0);
color: rgba(52, 73, 94, 0.9);
text-align: center;
}
button {
padding: 10px;
width: 50px;
height: 50px;
border-radius: 100%;
margin: 0 10px;
border: 1px solid rgba(52, 73, 94,0.67);
color: rgba(52, 73, 94,1.0);
background: rgba(26, 188, 156,1.0);
cursor: pointer;
}
button:disabled {
color: rgba(52, 73, 94,0.5);
}
button:focus, button:hover {
background: rgba(26, 188, 156,0.7);
outline: transparent;
}
JavaScript
var counter,
time = 360,
sec = document.getElementById("sec"),
min = document.getElementById("min"),
start = document.getElementById("start"),
reset = document.getElementById("reset"),
stop = document.getElementById("stop");
start.addEventListener("click", function () {
toggle();
counter = setInterval(count, 1000);
});
stop.addEventListener("click", function () {
toggle();
clearInterval(counter);
});
reset.addEventListener("click", function () {
time = 180;
sec.innerHTML = time % 60;
min.innerHTML = Math.floor(time / 60);
});
function count() {
if (time === 0) {
sec.innerHTML = 0;
min.innerHTML = 0;
toggle();
clearInterval(counter);
} else {
time--;
sec.innerHTML = time % 60;
min.innerHTML = Math.floor(time / 60);
}
}
function toggle() {
if (start.disabled) {
start.disabled = false;
stop.disabled = true;
} else {
start.disabled = true;
stop.disabled = false
}
};