How to Build a Dynamic Countdown Timer for “Coming Soon” Pages

KTim
• April 19, 2026 • 39 Views

How to Build a Dynamic Countdown Timer for "Coming Soon" Pages

Whether you are launching a new product, a personal portfolio, or a seasonal event like Christmas, a countdown timer creates a sense of urgency and excitement. While static text tells users “we are coming soon,” a ticking timer shows them exactly when to return. In this tutorial, we will use Vanilla JavaScript to calculate the time remaining until December 25, 2026.

Lesson Overview

What you will learn: How to use the JavaScript Date object and setInterval to create a live clock.
Key concepts: Unix Epoch time, the Modulo operator (%), and Template Literals.
Expected outcome: A functional, styled countdown clock that updates every second.

Building a countdown involves three parts: the HTML structure, the CSS styling, and the JavaScript logic to handle the math.

Step 1: The HTML Shell

We only need one container. JavaScript will “inject” the numbers and labels into this div dynamically.

<div class=”timer-container”></div>

Step 2: Styling the Digits with CSS

To make the timer look professional, we give each digit a dark background and a slight shadow to make them “pop” off the page.

.timer-container {
display: flex;
justify-content: center;
font-family: Arial, sans-serif;
}
.digit {
background: #000;
padding: 10px;
color: #fff;
border-radius: 4px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
font-size: 1.5rem;
}
#days, #hours, #minutes, #seconds {
text-align: center;
margin-right: 10px;
width: 70px;
}
.text {
display: block;
margin-top: 15px;
font-size: 0.8rem;
text-transform: uppercase;
}

Step 3: Calculating Time with JavaScript

The logic works by getting the “Future Date” in milliseconds and subtracting the “Current Date” in milliseconds. The difference is then converted into days, hours, minutes, and seconds.

const timerDiv = document.querySelector(“.timer-container”);
const getFutureDate = () => {
const openingDate = new Date(“December 25, 2026 00:00:00″).getTime();
const currentDate = new Date().getTime();
const distance = openingDate – currentDate;
// Time calculations in milliseconds
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
// Calculate remaining units
const dayDigits = Math.floor(distance / day);
const hourDigits = Math.floor((distance % day) / hour);
const minuteDigits = Math.floor((distance % hour) / minute);
const secondDigits = Math.floor((distance % minute) / second);
// Inject HTML and handle singular/plural labels
timerDiv.innerHTML = `
<div id=”days”>
<span class=”digit”>${dayDigits}</span>
<span class=”text”>${dayDigits === 1 ? “Day” : “Days”}</span>
</div>
<div id=”hours”>
<span class=”digit”>${hourDigits < 10 ? “0” + hourDigits : hourDigits}</span>
<span class=”text”>Hours</span>
</div>
<div id=”minutes”>
<span class=”digit”>${minuteDigits < 10 ? “0” + minuteDigits : minuteDigits}</span>
<span class=”text”>Minutes</span>
</div>
<div id=”seconds”>
<span class=”digit”>${secondDigits < 10 ? “0” + secondDigits : secondDigits}</span>
<span class=”text”>Seconds</span>
</div>`;
};
// Run the function every 1 second
setInterval(getFutureDate, 1000);

Playground

See the Pen CodePen Demo

Assignment

Task 1
Change the openingDate variable to target your own birthday or a specific upcoming holiday. Verify that the numbers update correctly.

Task 2
Add a conditional statement that displays a “Launch Day is Here!” message instead of the timer once the distance variable becomes less than zero.