Create a Countdown Timer for the ICC T20 World Cup 2024 using HTML, CSS, and JavaScript. This is about creating a countdown timer for the ICC T20 World Cup 2024. The countdown timer will automatically update every second, displaying the remaining days, hours, minutes, and seconds until the ICC T20 World Cup 2024 begins.
Steps to Create a Countdown Timer for the ICC T20 World Cup 2024:
Step 1: Create a new file named "countdown.html".
Step 2: Paste the following code into the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ICC T20 World Cup 2024 Countdown</title>
<style>
/* Style the timer container */
.countdown {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
color: #fff; /* Set white text color */
background-color: #222; /* Set dark background color */
padding: 20px;
border-radius: 5px; /* Add rounded corners */
}
/* Style the individual time units */
.countdown .time-unit {
font-size: 30px;
margin: 0 10px;
}
/* Style the time unit labels */
.countdown .time-unit span {
font-size: 16px;
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="countdown">
<h2 id="timer"></h2>
</div>
<script>
// Set the target date for the countdown (replace with the actual World Cup start date)
const targetDate = new Date("2024-06-02T00:00:00"); // Replace with actual World Cup start date
// Function to update the countdown timer
function updateTimer() {
const now = new Date();
const difference = targetDate.getTime() - now.getTime();
// Calculate days, hours, minutes, seconds
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
// Update the timer display
document.getElementById("timer").innerHTML = `
<div class="time-unit">
<span>Days</span>
${days}
</div>
<div class="time-unit">
<span>Hours</span>
${hours}
</div>
<div class="time-unit">
<span>Minutes</span>
${minutes}
</div>
<div class="time-unit">
<span>Seconds</span>
${seconds}
</div>
`;
}
// Update the timer every second
setInterval(updateTimer, 1000);
// Update the timer on page load
updateTimer();
</script>
</body>
</html>
Step 3: You need to replace the placeholder date "2024-06-02T00:00:00" with the actual start date of the ICC T20 World Cup 2024 when it becomes available. (This can be used for all events; you just need to change the event date, time, and name.)
Step 4: Save the code as an HTML file.
Step 5: Open it in a web browser and verify the countdown timer. It should automatically update every second, displaying the remaining days, hours, minutes, and seconds until the ICC T20 World Cup 2024 begins.
That it!