Scribd
Upload
14 views2 pages

HTML Event Countdown Timer

The document describes a simple web app that allows users to set a future event date and displays a real-time countdown in days, hours, minutes, and seconds. It includes an HTML structure with input for the event date, a button to start the countdown, and a script that calculates and updates the remaining time. The countdown updates every second until the event starts, at which point it displays a message indicating that the event has started.

Uploaded by

aniezahid
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
14 views2 pages

HTML Event Countdown Timer

The document describes a simple web app that allows users to set a future event date and displays a real-time countdown in days, hours, minutes, and seconds. It includes an HTML structure with input for the event date, a button to start the countdown, and a script that calculates and updates the remaining time. The countdown updates every second until the event starts, at which point it displays a message indicating that the event has started.

Uploaded by

aniezahid
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

Event Countdown Timer (HTML/CSS/JavaScript)

Description:
A simple web app that lets users set a future event date and shows a real-time countdown in
days, hours, minutes, and seconds.

[Link]

html

CopyEdit

<!DOCTYPE html>

<html>

<head>

<title>Countdown Timer</title>

<style>

body { font-family: sans-serif; text-align: center; margin-top: 50px; }

input, button { padding: 10px; font-size: 16px; margin: 10px; }

h2 { margin-top: 30px; }

</style>

</head>

<body>

<h1>Event Countdown</h1>

<input type="datetime-local" id="eventTime">

<button onclick="startCountdown()">Start</button>

<h2 id="countdown"></h2>

<script>

function startCountdown() {

const eventTime = new Date([Link]("eventTime").value).getTime();

const countdownElement = [Link]("countdown");


setInterval(() => {

const now = new Date().getTime();

const diff = eventTime - now;

if (diff < 0) {

[Link] = "Event Started!";

return;

const days = [Link](diff / (1000 * 60 * 60 * 24));

const hours = [Link]((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const minutes = [Link]((diff % (1000 * 60 * 60)) / (1000 * 60));

const seconds = [Link]((diff % (1000 * 60)) / 1000);

[Link] = `${days}d ${hours}h ${minutes}m ${seconds}s`;

}, 1000);

</script>

</body>

</html>

You might also like