A launch-countdown timer is a fun way for developers to create anticipation and reveal their website and its features. We can use JavaScript to achieve this within 10 minutes.
The launch countdown timer usually includes < Days: Hours: Minutes: Seconds/>, but you can decide that for yourself.
The purpose of a launch-countdown timer is to build anticipation and excitement; it is a great marketing strategy used by many projects. It serves as a public reminder of an upcoming event and keeps users engaged and informed about its timing.
This article is for rookie web developers who are eager to create excitement around their projects.
It is expected that you are familiar with HTML, CSS and basic JavaScript.
Brief overview of the implementation using JavaScript
A brief walk-through on how we are going to create a launch countdown timer via JavaScript
Set the launch date and time: Set the date and time for the launch. The date could be a specific timestamp or a date generated dynamically.
Find the time difference: Using JavaScript's
Dateobject, we can subtract the current timestamp from the launch timestamp to get the time difference.Update the countdown timer: Create a function that updates the timer by calculating the remaining time and updates the HTML element that displays the timer. We can trigger this function at first and at regular intervals to update the timer dynamically.
Display the countdown: Using JavaScript to access the HTML element, we can automatically update the countdown timer. We will update the remaining days, hours, minutes, and seconds countdown.
Handle edge cases: If the launch date has passed, it displays a message indicating the launch has happened and then displays the site. You can display whatever you want.
Add styling: Apply CSS to make the countdown timer page have the same appearance as the project site you are about to launch. Customize the fonts, colours, sizes, and layout to be appealing.
Setting Up the HTML Structure
The layout for a countdown launch timer is simple; we will need two containers. One container is for the countdown timer, and the other is for links for more information on the event (this is optional.)
<body>
<div class="launch-container">
</div>
<div class="social-container">
</div>
</body>
Set up a default styling sheet.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Red Hat Text", sans-serif;
font-size: 16px;
}
Next, add an HTML element to handle the countdown to the existing code.
<body>
<div class="launch-container">
<h1>We're launching Days Hours Minutes Seconds</h1> soon
<div class="timer-container">
<div class="timer-D">
<h2 id="countdownDays"></h2>
<p>Days</p>
</div>
<div class="timer-H">
<h2 id="countdownHours"></h2>
<p>Hours</p>
</div>
<div class="timer-M">
<h2 id="countdownMins"></h2>
<p>Minutes</p>
</div>
<div class="timer-H">
<h2 id="countdownSecs"></h2>
<p>Seconds</p>
</div>
</div>
</div>
<div class="social-container"></div>
</body>
We now have a basic layout and a default style; we will need a script for a functioning countdown timer.
Create and import your script into the HTML file.
----
------
---------
<script src="src/countdown.js"></script>
</body>
Writing the JavaScript Logic
Once you create the script file, the first step to creating a launch timer would be to set the launch time and date. And we can do this in JavaScript like so;
//Set the launch date
const launchDate = new Date("2023-09-30T12:00:00Z");
The Date is a JavaScript-built method representing time and date. It also provides various methods and properties to work with dates and times.
We created a new instance of Date and passed a launch date and time in the format YYYY-MM-DDTHH:mm:ssZ where
T - is a delimiter to separate the date from the time, and
Z - is a time zone offset. It indicates that the time is in Coordinated Universal Time(UTC) format. The 'Z' means Zulu time, another UTC term.
Next, we create a function to count down from our current time to the launch time and use the Date method to get our current time.
function updateLaunchDate() {
// Get current time
const currentTime = new Date().getTime();
}
Remember, it's a countdown so we will need the time difference between the current and launch times. We have to do some math here.
We must know what to expect from the currentTime. I expect a value like this 1657585800000, known as UNIX timestamps.
Next, calculate the time difference by subtracting currentTime from launch date. The UNIX timestamp of the launch date is 1688122800
const distance = launchDate - currentTime;
Now, with the distance value, we know where we are counting to.
The distance value will help us calculate the days, hours, minutes, and seconds; we must divide the distance by the respective denominators.
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
We divided the days with days in milliseconds (1000 * 60 * 60 * 24), and for the rest, we used modulus to get the reminder (concerning the previous time unit) and divide it with the respective unit.
We have done most of the work but can only see it once we display it on the HTML source code.
Let's get the unique ID for each container.
const countdownDays = document.getElementById("countdownDays");
const countdownHours = document.getElementById("countdownHours");
const countdownMins = document.getElementById("countdownMins");
const countdownSecs = document.getElementById("countdownSecs");
And pass the value using the innerHTML method.
countdownDays.innerHTML = `${days}`;
countdownHours.innerHTML = `${hours}`;
countdownMins.innerHTML = `${minutes}`;
countdownSecs.innerHTML = `${seconds}`;
The next step is to update the countdown every second.
setInterval(updateLaunchDate, 1000);
Putting everything together, this is what you should have.
//Set the launch date
const launchDate = new Date("2023-09-30T12:00:00Z");
function updateLaunchDate() {
// Get current time
const currentTime = new Date().getTime();
const distance = launchDate - currentTime;
// Calculate remaining days, hours, minutes, and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
//console.log(minutes, seconds, days, hours);
//Display the counter on the UI
const countdownDays = document.getElementById("countdownDays");
const countdownHours = document.getElementById("countdownHours");
const countdownMins = document.getElementById("countdownMins");
const countdownSecs = document.getElementById("countdownSecs");
countdownDays.innerHTML = `${days}`;
countdownHours.innerHTML = `${hours}`;
countdownMins.innerHTML = `${minutes}`;
countdownSecs.innerHTML = `${seconds}`;
// Update the countdown every second
setInterval(updateLaunchDate, 1000);
}
It would show up once we called the function.
// Call the updateCountdown function initially
updateLaunchDate();
And now we can see it on full display in our user interface.
That was easy, right?
Time to style
Styling the Countdown Timer
First, I will add social links because I want my community to learn more about my product.
<div class="social-container">
<div class="social">
<img id="face" src="./images/icon-facebook.svg" alt="" />
<img src="./images/icon-Instagram.svg" alt="" />
<img src="./images/icon-Pinterest.svg" alt="" />
</div>
</div>
I will add some background colour and style each timer's container.
Here is my styling
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Red Hat Text", sans-serif;
font-size: 16px;
background-image: url(/images/bg-stars.svg);
background-color: hsl(234, 17%, 12%);
colour: white;
}
.launch-container {
place-content: center;
display: grid;
min-height: 100vh;
margin-top: -100px;
}
.launch-container h1 {
margin: 20px;
}
.timer-container {
display: flex;
margin-top: 150px;
}
.timer-container div {
padding-right: 80px;
}
.timer-container h2 {
font-size: 80px;
color: hsl(345, 95%, 68%);
background-color: hsl(236, 21%, 26%);
padding: 40px 20px 20px 21px;
width: 150px;
border-radius: 56% 44% 25% 75% / 74% 100% 0% 26%;
-webkit-border-radius: 56% 44% 25% 75% / 74% 100% 0% 26%;
-moz-border-radius: 56% 44% 25% 75% / 74% 100% 0% 26%;
-ms-border-radius: 56% 44% 25% 75% / 74% 100% 0% 26%;
-o-border-radius: 56% 44% 25% 75% / 74% 100% 0% 26%;
}
.social-container {
background-image: URL(/images/pattern-hills.svg);
height: 150px;
width: 100%;
}
.social {
display: flex;
place-content: center;
}
.social img {
margin: 0 40px;
/* min-width: 100vh; */
}
.social img:hover {
cursor: pointer;
filter: sepia(10) hue-rotate(50deg) saturate(70) brightness(85%);
-webkit-filter: sepia(10) hue-rotate(50deg) saturate(70) brightness(85%);
}
@media (min-width: 375px) {
.launch-container {
place-content: center;
display: grid;
min-height: 90vh;
margin-top: -50px;
}
.timer-container {
margin-left: 10px;
}
.timer-container div {
padding-right: 20px;
}
.timer-container h2 {
font-size: 40px;
padding: 20px 10px 10px 11px;
width: 75px;
}
.launch-container h1 {
font-size: 20px;
align-self: center;
}
}
I added a media query for the mobile screen.
Here is the final result.
- Mobile view
- Desktop view
We are ready to launch, but what will happen when the launch time arrives? At this point, nothing will happen; let's change that.
We will add a display message on the HTML code and make it appear when our launch date has arrived.
<div id="display"></div>
The script for this is simple, our counter is the distance variable, so if it gets to zero, show the welcome message.
if (distance <= 0) {
const display = document.getElementById("display");
display.innerHTML = `WE ARE LIVE`;
clearInterval(countdownInterval);
}
This code will display WE ARE LIVE when the countdown completes.
But we need to stop displaying the countdown timer; otherwise, it will be negative.
Let's create a function to hide the countdown elements when the distance variable reaches zero.
We are adding a unique id so we can target the container.
<div class="timer-container" id="timerContainer">
Create the function to add a hidden class from our stylesheet.
function hiddenlement() {
const countdownDays = document.getElementById("timerContainer");
countdownDays.classList.add("hidden");
}
.hidden {
display: none;
}
Now, we pass it back to the if statement.
if (distance <= 0) {
const display = document.getElementById("display");
display.innerHTML = `WE ARE LIVE`;
hiddenlement();
clearInterval(countdownInterval);
}
We are close to the end of this project; this is what we get when the launch date arrives.
Not bad, but we can style it.
For the styling, you are free to do whatever you want; try to make it similar to the main product.
You can also add a redirection to your site or do whatever you want at the launch time.
Conclusion
Creating a launch countdown timer aims to generate anticipation and use it as a form of marketing for a product. Following this outline, you can create a countdown using JavaScript within 10 minutes. Remember to create a countdown design page similar to the product design and meet the desired launch date.
Depending on your launching product, you can add more features on the launch down the page to keep your community excited.
Top comments (0)