Scribd
Upload
12 views1 page

!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
12 views1 page

!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

<!

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