body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
.timer {
font-size: 40px;
margin-bottom: 20px;
}
.buttons {
display: flex;
justify-content: center;
}
button {
padding: 10px 20px;
margin: 0 10px;
cursor: pointer;
border: none;
background-color: #007bff;
color: #fff;
font-size: 16px;
border-radius: 5px;
}

let hours = 0;
let minutes = 0;
let seconds = 0;
let timer;

const updateTimerDisplay = () => {
document.querySelector(‘.timer’).textContent = `${hours.toString().padStart(2, ‘0’)}:${minutes.toString().padStart(2, ‘0’)}:${seconds.toString().padStart(2, ‘0’)}`;
}

const startTimer = () => {
timer = setInterval(() => {
seconds++;
if (seconds === 60) {
seconds = 0;
minutes++;
if (minutes === 60) {
minutes = 0;
hours++;
}
}
updateTimerDisplay();
}, 1000);
}

const stopTimer = () => {
clearInterval(timer);
}

const resetTimer = () => {
clearInterval(timer);
hours = 0;
minutes = 0;
seconds = 0;
updateTimerDisplay();
}

document.getElementById(‘startBtn’).addEventListener(‘click’, startTimer);
document.getElementById(‘stopBtn’).addEventListener(‘click’, stopTimer);
document.getElementById(‘resetBtn’).addEventListener(‘click’, resetTimer);