Countdown Timer
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #f093fb, #f5576c);
color: #fff;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
.timer-container {
background: rgba(0, 0, 0, 0.5);
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
width: 80%;
max-width: 400px;
}
.title {
font-size: 2rem;
margin-bottom: 20px;
}
.timer {
display: flex;
justify-content: space-between;
gap: 15px;
}
.time-block {
background: #2d2d2d;
padding: 15px;
border-radius: 10px;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.time {
font-size: 3rem;
font-weight: bold;
margin: 0;
}
.label {
font-size: 1rem;
color: #ddd;
}
@media (max-width: 600px) {
.timer {
flex-direction: column;
gap: 10px;
}
}
// Countdown Timer Script
const targetDate = new Date("December 31, 2024 23:59:59").getTime();
const daysElement = document.getElementById("days");
const hoursElement = document.getElementById("hours");
const minutesElement = document.getElementById("minutes");
const secondsElement = document.getElementById("seconds");
function updateCountdown() {
const now = new Date().getTime();
const timeRemaining = targetDate - now;
if (timeRemaining > 0) {
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
daysElement.textContent = String(days).padStart(2, "0");
hoursElement.textContent = String(hours).padStart(2, "0");
minutesElement.textContent = String(minutes).padStart(2, "0");
secondsElement.textContent = String(seconds).padStart(2, "0");
} else {
clearInterval(countdown);
document.querySelector(".timer-container").innerHTML = "
Time's Up!
";
}
}
const countdown = setInterval(updateCountdown, 1000):
updateCountdown();
