<!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>