Countdown of New Year
To create a dynamic New Year countdown using HTML, CSS, and JavaScript, you can use the following code:HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Countdown</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="countdown">
<span id="days">00</span> days
<span id="hours">00</span> hours
<span id="minutes">00</span> minutes
<span id="seconds">00</span> seconds
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
body {
font-family: Arial, sans-serif;
text-align: center;
}
.countdown {
font-size: 2em;
margin: 100px 0;
}
span {
margin: 0 10px;
}
```
JavaScript (script.js
function updateCountdown() {
const now = new Date();
const newYear = new Date(now.getFullYear() + 1, 0, 1);
const timeLeft = newYear - now;
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.getElementById("days").textContent = days.toString().padStart(2, "0");
document.getElementById("hours").textContent = hours.toString().padStart(2, "0");
document.getElementById("minutes").textContent = minutes.toString().padStart(2, "0");
document.getElementById("seconds").textContent = seconds.toString().padStart(2, "0");
}
setInterval(updateCountdown, 1000);
updateCountdown();
The `updateCountdown` function calculates the time remaining until the next New Year and updates the HTML elements with the corresponding IDs.
The `setInterval` function ensures that `updateCountdown` is called every second, which keeps the countdown up-to-date in real-time.
Make sure to have these three files (`index.html`, `styles.css`, and `script.js`) in the same directory, and open the `index.html` file in a web browser. You should see a dynamic New Year countdown!
Here's the combined and fully executable code with some modifications is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Countdown</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.countdown {
font-size: 2em;
margin: 100px 0;
}
span {
margin: 0 10px;
}
</style>
</head>
<body>
<div class="countdown">
<h3>New Year In </h3>
<span id="days">00</span> Days,
<span id="hours">00</span> Hours,
<span id="minutes">00</span> Minutes,
<span id="seconds">00</span> Seconds
</div>
<script>
function updateCountdown() {
const now = new Date();
const newYear = new Date(now.getFullYear() + 1, 0, 1);
const timeLeft = newYear - now;
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.getElementById("days").textContent = days.toString().padStart(2, "0");
document.getElementById("hours").textContent = hours.toString().padStart(2, "0");
document.getElementById("minutes").textContent = minutes.toString().padStart(2, "0");
document.getElementById("seconds").textContent = seconds.toString().padStart(2, "0");
}
setInterval(updateCountdown, 1000);
updateCountdown();
</script>
</body>
</html>
Countdown of Your Birthday
Let your bithday comes at 15 April every year so the code for your upcoming birthday countdown will be as follows.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Countdown</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.countdown {
font-size: 2em;
margin: 100px 0;
}
span {
margin: 0 10px;
}
</style>
</head>
<body>
<div class="countdown">
<span id="days">00</span> Days,
<span id="hours">00</span> Hours,
<span id="minutes">00</span> Minutes,
<span id="seconds">00</span> Seconds
</div>
<script>
function updateCountdown() {
const now = new Date();
const birthday = new Date(now.getFullYear(), 3, 15);
// Note: Months are 0-based, so 3 represents April and 15 represents the date of the particular month
// If birthday has already passed this year, set it for next year
if (now > birthday) {
birthday.setFullYear(now.getFullYear() + 1);
}
const timeLeft = birthday - now;
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.getElementById("days").textContent = days.toString().padStart(2, "0");
document.getElementById("hours").textContent = hours.toString().padStart(2, "0");
document.getElementById("minutes").textContent = minutes.toString().padStart(2, "0");
document.getElementById("seconds").textContent = seconds.toString().padStart(2, "0");
}
setInterval(updateCountdown, 1000);
updateCountdown();
</script>
</body>
</html>