===============================================
Dear Reader,
We might have come across e-commerce websites with countdown timers that give information on some sales or deals. We will create a web page where we will place a countdown timer that informs us about when the discount sale will end. Let’s implement one such scenario here. Countdown begins⏳ !!!
Folder Structure of the project:
- index.html — contains the HTML layout which defines the element structure that would be shown on the page.
- images are directly placed inside the folder of our project.
- style.css- contains CSS code for styling. Using CSS we can style the different portions to make them more visually appealing.
- script.js — contains Javascript code. There are several functions that work together to handle all the functions of the timer.
HTML Layout
Open VSCode and create the basic HTML structure in an index.html file by ! and then pressing tab. Give the title as ‘Countdown Timer*’. Link **style.css* and script.js to the created HTML file.
Create a div class product that wraps around everything related to the product. I have used shoes as my discounted product for this example. Use img tag to add the image of the shoe.
Add the following div class,
details — to hold information on the deal.
wrap — which wraps timer and text.
timer — to hold the entire countdown timer.
days, hours, mins, and secs — to hold the remaining days, hours, mins, and secs.
Let days, hours, mins, and secs class contain span tag with id days_left, hours_left, mins_left, and secs_left respectively. The dynamic data will go inside the span element and id will be used in javascript code to fetch the element.
<!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">
</head>
<body>
<h1> Best deals of the day</h1>
<div class="product">
<img src="shoe.jpg" alt="shoes" width="400px" height="300px">
<div class="details">
<h3>🔥30% off on all branded shoes🔥</h3>
<p> This festive season we have multiple amazing offers on all branded shoes.
Bank and payment offers, and many more deals.This sale brings hundreds of deals
across all branded shoes. To help you find the best discounts,
we've handpicked some of the best deals and offers available on shoes during the ongoing discount Sale. Grab the offer soon!!🤩
</p>
<div class="wrap">
<h3 class="offer">Offer ends in</h3>
<div class="timer">
<div class="days">
<span id="days_left"> 0</span>
days
</div>
<div class="hours">
<span id="hours_left"> 0 </span>
hours
</div>
<div class="mins">
<span id="mins_left"> 0 </span>
mins
</div>
<div class="secs">
<span id="secs_left"> 0 </span>
secs
</div>
</div>
</div>
</div>
</div>
<script src="style.js"></script>
</body>
</html>
CSS Styling
Quite a bit of CSS coding is required to make the page visually appealing and even without much CSS, we can implement the basic countdown timer.
Below is the code,
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body{
font-family: 'Oswald', sans-serif;
align-content: center;
text-align: center;
background-color:rgb(244, 248, 250);
}
.product{
display: flex;
background-color: rgb(237, 243, 243);
gap: 7rem;
}
.details{
display:flex;
flex-direction: column;
margin-right: 150px;
}
.wrap{
display: flex;
flex-direction: row;
}
.timer{
display: flex;
text-align: center;
flex-direction: row;
margin-left: 3rem;
gap: 30px;
color:red;
margin-top: -5px;
}
.days{
background-color: blanchedalmond;
padding: 11px;
font-size: 22px;
}
.hours{
background-color: blanchedalmond;
padding: 11px;
font-size: 22px;
}
.mins{
background-color: blanchedalmond;
padding: 11px;
font-size: 22px;
}
.secs{
background-color: blanchedalmond;
padding: 11px;
font-size: 22px;
}
h3{
color:lightseagreen;
}
.offer{
flex-basis: 6rem;
}
p{
text-align: left;
}
Javascript logic
The whole idea is to calculate the time left before the offer ends. To calculate the time left we will take the difference of the current date and offer end date and present it in valid format.
Let’s create a function called countdown() in which we will declare a const called today and offerDate to add the current date and offer end date objects respectively.
const today = new Date();
var offerDate = new Date('30 oct 2021');
Assign the difference between offerDate and today to the const offerTime which will give the time left in milliseconds.
const offerTime = offerDate - today;
Let’s calculate the number of days, hours, mins, and secs left using the offerTime value.
To calculate seconds:
- Divide milliseconds by 1000 to convert to seconds:
(offerTime/1000) - Divide the total seconds by 60 and grab the remainder. You don’t want all of the seconds, just those remaining after the minutes have been counted:
(offerTime/1000) % 60 - Round this down to the nearest whole number. This is because you want complete seconds, not fractions of seconds:
Math.floor( (offerTime/1000) % 60 )
To calculate minutes:
- Divide milliseconds by 1000 to convert to seconds:
(offerTime/1000) - Divide the total seconds by 60 to get the minutes( 1 min = 60 secs), again divide by 60 and grab the remainder. Round this down to the nearest whole number.
Math.floor((offerTime / (1000 * 60) % 60))
To calculate hours:
- Divide milliseconds by 1000 to convert to seconds:
(offerTime/1000) - Divide the total seconds by 60 to get the minutes( 1 min = 60 secs),again divide by 60 (1 hour = 60 minutes), divide the result by 24 (1 day = 24 hours)and grab the remainder. Round this down to the nearest whole number.
Math.floor((offerTime / (1000 * 60 * 60) % 24))
To calculate days:
- Divide milliseconds by 1000 to convert to seconds:
(offerTime/1000) - Divide the total seconds by 60 to get the minutes( 1 min = 60 secs),again divide by 60 (1 hour = 60 minutes), divide the result by 24 (1 day = 24 hours). Round this down to the nearest whole number.
Math.floor((offerTime / (1000 * 60 * 60 * 24))
Once we have all the values we will set days, hours, mins, and secs to HTML span element.HTML element where the value to be set is fetched using getElementById() method and using innerHTML set the calculated values.
const days\_el = document.getElementById("days\_left");
days\_el.innerHTML = offerDays;const hours\_el = document.getElementById("hours\_left");
hours\_el.innerHTML = offerHours;const mins\_el = document.getElementById("mins\_left");
mins\_el.innerHTML = offerMins;const secs\_el=document.getElementById("secs\_left");
secs\_el.innerHTML = offerSecs;
I added one more function just to reset the offer date once the offer date reaches the current date. We can ignore this function if not required.
Using setInterval() method call the countdown() function every second.
setInterval(countdown, 1000);
function countdown() {
const today = new Date();
var offerDate = new Date('30 oct 2021');
//If offer ends reset to new value
if (today.getSeconds() == offerDate.getSeconds()) {
offerDate = resetOfferDate();
}
//offerTime will have the total millseconds
const offerTime = offerDate - today;
// 1 sec= 1000 ms
// 1 min = 60 sec
// 1 hour = 60 mins
// 1 day = 24 hours
const offerDays = Math.floor(offerTime / (1000 * 60 * 60 * 24));
const offerHours = Math.floor((offerTime / (1000 * 60 * 60) % 24));
const offerMins = Math.floor((offerTime / (1000 * 60) % 60));
const offerSecs = Math.floor((offerTime / 1000) % 60);
const days_el = document.getElementById("days_left");
days_el.innerHTML = offerDays;
const hours_el = document.getElementById("hours_left");
hours_el.innerHTML = offerHours;
const mins_el = document.getElementById("mins_left");
mins_el.innerHTML = offerMins;
const secs_el = document.getElementById("secs_left");
secs_el.innerHTML = offerSecs;
}
function resetOfferDate() {
const futureDate = new Date();
futureDate.setDate(futureDate.getDate() + 15);
return futureDate;
}
setInterval(countdown, 1000);
We’ve finished coding! Time to check the output.
All of the above-written code is available on GitHub. Watch this space for more interesting articles, up next in this series!
Thanks for your interest.
Latest comments (7)
No worries
new Date(undefined)always throws 'Invalid Date' in the console andnew Date(null)returns the starting point.Thanks for the neat snippet though.
Could you also explain why we subtract
621672192e5?When I called the function without parameters date1 was undefined and it returned undefined o.o
I think you forgot to put in new Date() into diffWithOffer closure function.
diffWithOffer(new Date())Nice timer.
Please host the pages on github pages. will be easy for others to view.
Here is mine: github.com/sadanandpai/frontend-mi...
Recently made a Launch countdown project from fontendmentor.io. It has a flip animation for the number cards, and I learned about web components. The source code is there if someone wants to look at it.
Sooooo if I wanted just a countdown timer like 10 minutes from now instead of a specific date, how would I achieve that?
var offerDate = new Date('30 oct 2021')
Instead of the above format, you can use below format
new Date(year, month, day, hours, minutes, seconds, milliseconds) .
Ex: var offerDate = new Date(2021,09,16,09,20,0,0)
Set the values ten minutes ahead of current time to acheive 10 minutes countdown timer.