Here is clear html code to create the webpage of new year countdown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New Year Countdown</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle, #111, #000);
color: #fff;
font-family: Arial, sans-serif;
}
.countdown-box {
text-align: center;
padding: 30px 40px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
}
h1 {
margin-bottom: 20px;
color: gold;
}
.timer {
display: flex;
gap: 15px;
justify-content: center;
}
.time {
background: #000;
padding: 15px 18px;
border-radius: 8px;
min-width: 80px;
}
.time span {
display: block;
font-size: 28px;
font-weight: bold;
}
.label {
font-size: 12px;
color: #aaa;
}
#message {
margin-top: 20px;
font-size: 22px;
color: gold;
}
</style>
</head>
<body>
<div class="countdown-box">
<h1>🎆 New Year Countdown 🎆</h1>
<div class="timer">
<div class="time">
<span id="days">0</span>
<div class="label">Days</div>
</div>
<div class="time">
<span id="hours">0</span>
<div class="label">Hours</div>
</div>
<div class="time">
<span id="minutes">0</span>
<div class="label">Minutes</div>
</div>
<div class="time">
<span id="seconds">0</span>
<div class="label">Seconds</div>
</div>
</div>
<div id="message"></div>
</div>
<script>
function newYearCountdown() {
var now = new Date();
var currentYear = now.getFullYear();
var newYear = new Date("January 1, " + (currentYear + 1) + " 00:00:00");
var diff = newYear - now;
if (diff <= 0) {
document.getElementById("message").innerHTML = "🎉 Happy New Year! 🎉";
return;
}
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
var minutes = Math.floor((diff / (1000 * 60)) % 60);
var seconds = Math.floor((diff / 1000) % 60);
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
}
setInterval(newYearCountdown, 1000);
newYearCountdown();
</script>
</body>
</html>
Copy this code, save it in your device as .html file and open it in your browser
Post a Comment