HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>Happy New Year 2025</h1>
<div class="countdown-container">
<div class="countdown-el days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdown-el hours-c">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="countdown-el mins-c">
<p class="big-text" id="mins">0</p>
<span>mins</span>
</div>
<div class="countdown-el seconds-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
<div class="bg-desc">FUTURE DUSK - The Color of 2025</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Genos:wght@200&family=Poppins:wght@200&display=swap');
* {
box-sizing: border-box;
color: white;
}
body {
font-family: 'Poppins', sans-serif;
background-image: url(../background2.webp);
background-size: cover;
min-height: 100vh;
background-position: center center;
margin: 0;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* flex */
/* fld */
}
h1 {
font-weight: normal;
font-size: 4rem;
margin-top: -10rem;
/* rem */
}
.countdown-container {
display:flex;
flex-wrap: wrap;
position: absolute;
}
.big-text {
font-weight: bold;
font-size: 6rem;
line-height: 1;
margin: 0 2rem;
}
.countdown-el {
text-align: center;
}
.countdown-el span {
font-size: 1.5rem;
}
h1:hover, p:hover, span:hover {
color:rgb(169, 166, 255);
}
.bg-desc {
color:white;
position: relative;
margin: 0;
top: 48vh;
font-weight: bold;
}
JS
const daysE1 = document.getElementById('days');
const hoursE1 = document.getElementById('hours');
const minsE1 = document.getElementById('mins');
const secondsE1 = document.getElementById('seconds');
const newYears = '1 Jan 2025';
function countdown() {
const newYearsDate = new Date(newYears);
const currentDate = new Date();
const totalSeconds = Math.floor((newYearsDate - currentDate) / 1000);
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600) % 24;
const mins = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds) % 60;
daysE1.innerHTML = days;
hoursE1.innerHTML = formatTime(hours);
minsE1.innerHTML = formatTime(mins);
secondsE1.innerHTML = formatTime(seconds);
}
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}
//initial call
setInterval(countdown, 1000);
countdown();
