<!DOCTYPE html>
Timer App with Clock
.timer {
text-align: center;
margin-top: 50px;
}
.clock {
font-size: 40px;
margin-bottom: 20px;
}
.controls button {
padding: 10px 20px;
margin: 10px;
background-color: #2074A0;
color: #fff;
border: none;
cursor: pointer;
}
.timer-display {
font-size: 60px;
}
let timer;
let startTime;
let elapsedTime = 0;
const timerDisplay = document.getElementById(‘timerDisplay’);
function startTimer() {
if (!timer) {
startTime = Date.now() – elapsedTime;
timer = setInterval(() => {
elapsedTime = Date.now() – startTime;
updateTimer(elapsedTime);
}, 1000);
}
}
function stopTimer() {
clearInterval(timer);
timer = null;
}
function resetTimer() {
clearInterval(timer);
timer = null;
elapsedTime = 0;
updateTimer(elapsedTime);
}
function updateTimer(elapsedTime) {
const seconds = Math.floor(elapsedTime / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const displayHours = String(hours).padStart(2, ‘0’);
const displayMinutes = String(minutes % 60).padStart(2, ‘0’);
const displaySeconds = String(seconds % 60).padStart(2, ‘0’);
timerDisplay.textContent = `${displayHours}:${displayMinutes}:${displaySeconds}`;
}
❤