<!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
>
<
link
href
=
rel
=
"stylesheet"
>
<
style
>
.countdown {
display: none; /* Initially hide */
justify-content: center;
align-items: center;
font-size: 3rem;
}
.container {
padding-top: 50px;
}
.timer-box {
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-6 offset-md-3"
>
<
h1
class
=
"text-center mb-4"
>Countdown Timer</
h1
>
</
div
>
</
div
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-6 offset-md-3"
>
<
div
class
=
"timer-box"
>
<
div
class
=
"form-group"
>
<
label
for
=
"countdownDate"
>Set Countdown Date and Time:</
label
>
<
input
type
=
"datetime-local"
class
=
"form-control"
id
=
"countdownDate"
>
</
div
>
<
button
class
=
"btn btn-primary mt-2 w-100"
onclick
=
"startCountdown()"
>
Start Countdown
</
button
>
<
div
class
=
"countdown mt-4"
id
=
"countdown"
>
<
span
id
=
"days"
>00</
span
> :
<
span
id
=
"hours"
>00</
span
> :
<
span
id
=
"minutes"
>00</
span
> :
<
span
id
=
"seconds"
>00</
span
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
let countdownDate;
function startCountdown() {
// Get the date and time set by the user
countdownDate = new Date(document.getElementById("countdownDate")
.value).getTime();
// Show the countdown clock
document.getElementById("countdown").style.display = "flex";
// Update the countdown every 1 second
let x = setInterval(function() {
// Get the current date and time
let now = new Date().getTime();
// Calculate the distance between now and the countdown date
let distance = countdownDate - now;
// Calculate days, hours, minutes and seconds
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result
document.getElementById("days").innerHTML = days.
toString().padStart(2, '0');
document.getElementById("hours").innerHTML = hours.
toString().padStart(2, '0');
document.getElementById("minutes").innerHTML = minutes.
toString().padStart(2, '0');
document.getElementById("seconds").innerHTML = seconds.
toString().padStart(2, '0');
// If the countdown is over, display a message
if (distance <
0
) {
clearInterval(x);
document.getElementById("countdown")
.innerHTML
=
"EXPIRED"
;
}
}, 1000);
}
</script>
</
body
>
</
html
>