timer html

 

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="styles.css" />

<title>Stopwatch</title>

 

<style>

body {

background: gainsboro;

margin: 0;

box-sizing: border-box;

}

 

.container {

text-align: center;

}

 

#time {

font-size: 50px;

}

 

.btns-container {

margin: 10px 0;

}

 

button {

padding: 8px 15px;

border: none;

border-radius: 2px;

color: white;

cursor: pointer;

}

button:hover {

filter: grayscale(0.5);

}

button:focus {

outline: none;

}

 

#start_btn {

background: green;

}

#pause_btn {

background: blue;

display: none;

}

#reset_btn {

background: red;

display: none;

}

 

</style>

 

</head>

<body>

<div class="container">

<h1>Stopwatch</h1>

 

<div id="time">00:00:00</div>

 

<div class="btns-container">

<button id="start_btn" onclick="start()">START</button>

<button id="pause_btn" onclick="pause()">PAUSE</button>

<button id="reset_btn" onclick="reset()">RESET</button>

</div>

</div>

 

<script>

const timer = document.querySelector('#time');

const start_btn = document.querySelector('#start_btn');

const pause_btn = document.querySelector('#pause_btn');

const reset_btn = document.querySelector('#reset_btn');

 

let time = 0,

interval;

 

function showTime() {

time += 1;

timer.innerHTML = toHHMMSS(time);

}

 

function start() {

interval = setInterval(showTime, 1000);

hideBtn([start_btn]);

showBtn([pause_btn, reset_btn]);

}

 

function pause() {

if (interval) {

clearInterval(interval);

interval = null;

pause_btn.innerHTML = 'RESUME';

} else {

interval = setInterval(showTime, 1000);

pause_btn.innerHTML = 'PAUSE';

}

}

 

function reset() {

clearInterval(interval);

interval = null;

pause_btn.innerHTML = 'PAUSE';

time = 0;

timer.innerHTML = toHHMMSS(time);

hideBtn([pause_btn, reset_btn]);

showBtn([start_btn]);

}

 

function toHHMMSS(time) {

let hours = Math.floor(time / 3600);

let minutes = Math.floor((time - hours * 3600) / 60);

let seconds = time - hours * 3600 - minutes * 60;

 

hours = `${hours}`.padStart(2, '0');

minutes = `${minutes}`.padStart(2, '0');

seconds = `${seconds}`.padStart(2, '0');

 

return hours + ':' + minutes + ':' + seconds;

}

 

function showBtn(btnArr) {

btnArr.forEach((btn) => (btn.style.display = 'inline-block'));

}

function hideBtn(btnArr) {

btnArr.forEach((btn) => (btn.style.display = 'none'));

}

 

</script>

 

 

</body>

</html>