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>
0 Comments
"Thank you for taking the time to engage with this post! We value thoughtful and constructive comments that contribute to the discussion. Please keep your comments respectful and on-topic. We encourage you to share your insights, ask questions, and participate in meaningful conversations. Note that comments are moderated, and any inappropriate or spammy content will be removed. We look forward to hearing your thoughts!"