0% found this document useful (0 votes)
20 views3 pages

Doctype HTML

This document is an HTML code for a countdown timer that counts down to December 31, 2025. It includes styling for the display and a JavaScript function that updates the countdown every second. Once the countdown reaches zero, it displays a message indicating that the countdown has finished.

Uploaded by

cahayamaulida06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
20 views3 pages

Doctype HTML

This document is an HTML code for a countdown timer that counts down to December 31, 2025. It includes styling for the display and a JavaScript function that updates the countdown every second. Once the countdown reaches zero, it displays a message indicating that the countdown has finished.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Countdown Timer</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
background: #f0f0f0;
}
.countdown {
font-size: 2em;
color: #333;
background: #fff;
display: inline-block;
padding: 20px 40px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
</style>
</head>
<body>

<h1>Countdown to Launch</h1>
<div class="countdown" id="countdown"></div>

<script>
const countdownEl = document.getElementById("countdown");
const targetDate = new Date("2025-12-31T23:59:59").getTime();

function updateCountdown() {
const now = new Date().getTime();
const distance = targetDate - now;

if (distance < 0) {
countdownEl.innerHTML = "Countdown Finished!";
clearInterval(timer);
return;
}

const days = Math.floor(distance / (1000 * 60 * 60 * 24));


const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 *
60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);

countdownEl.innerHTML = `${days}d ${hours}h ${minutes}m $


{seconds}s`;
}

const timer = setInterval(updateCountdown, 1000);


updateCountdown(); // initial call
</script>

</body>
</html>countdownEl.innerHTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Countdown Timer</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
background: #f0f0f0;
}
.countdown {
font-size: 2em;
color: #333;
background: #fff;
display: inline-block;
padding: 20px 40px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
</style>
</head>
<body>

<h1>Countdown to Launch</h1>
<div class="countdown" id="countdown"></div>

<script>
const countdownEl = document.getElementById("countdown");
const targetDate = new Date("2025-12-31T23:59:59").getTime();

function updateCountdown() {
const now = new Date().getTime();
const distance = targetDate - now;

if (distance < 0) {
countdownEl.innerHTML = "Countdown Finished!";
clearInterval(timer);
return;
}

const days = Math.floor(distance / (1000 * 60 * 60 * 24));


const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 *
60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);

countdownEl.innerHTML = `${days}d ${hours}h ${minutes}m $


{seconds}s`;
}

const timer = setInterval(updateCountdown, 1000);


updateCountdown(); // initial call
</script>

</body>
</htmlll

You might also like