Scribd
Upload
3 views

!DOCTYPE HTML

Uploaded by

sidharthavarma27
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

!DOCTYPE HTML

Uploaded by

sidharthavarma27
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aesthetic Timer</title>
<style>
body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Arial', sans-serif;
}
#timer {
color: white;
font-size: 5em;
}
</style>
</head>
<body>
<div id="timer">00:00:00</div>

<script>
function startTimer(duration, display) {
let timer = duration, hours, minutes, seconds;
setInterval(function () {
hours = parseInt(timer / 3600, 10);
minutes = parseInt((timer % 3600) / 60, 10);
seconds = parseInt(timer % 60, 10);

hours = hours < 10 ? "0" + hours : hours;


minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;

display.textContent = hours + ":" + minutes + ":" + seconds;

if (--timer < 0) {
timer = duration;
}
}, 1000);
}

window.onload = function () {
let duration = 60 * 60; // 1 hour in seconds
let display = document.querySelector('#timer');
startTimer(duration, display);
};
</script>
</body>
</html>

You might also like