Javascript is a popular programming language used by websites, almost all websites available in this digital world all use Javascript as a component to make the website more interactive. This Javascript is included in 3 other important components such as HTML and CSS and you as a developer are obliged to understand how this Javascript works for your website.
On this occasion, I will give a simple but quite commonly used tip or tutorial, which is to make a countdown timer with simple and powerful Javascript. For those of you who don't know, countdown is often used in e-commerce websites to provide information regarding the remaining time, for example the remaining products in minutes, seconds, hours, or days, flash sales and much more. If you are looking for a way to make this countdown timer, this article is for you.
1. Preparation
The first time you have to prepare is the time data that will be processed into a countdown, for example a case for example you have a simple e-commerce website and you display products that only appear in 1 day, for sure you will display the expiration date when, for example this product will expire on date 24-07-2022, the date is displayed through the database that you have saved, usually in the format yyyy-mm-dd h:i:s.
2. Create variables and setInterval
To change the date format into a countdown, you need javascript to process it, you can open your favorite text editor, then call the date into the productExpired date variable.
// Set the date to set the timer
var DateProductExpired = new Date('2022-07-27 08:07:01').getTime(); Next we will create a time interval that corresponds to the current time, which means that every second the countdown will continue to run backwards in 1 second as long as your website visitors are still on the product page that processes the countdown. In this next most important variable, we will determine the countdown time by looking for the difference in the time of product data that has set the expiration date with the current time.
var process = setInterval(function() {
// Calling the current date and time
var currenttime = new Date().getTime();
// Find the time and date difference between current and product data
var findDifference = DateProductExpired - currenttime;
}, 1000);
3. Process the time difference with the expiration date and display it into the browser
After we have determined the difference, the next step is to calculate the days, hours, minutes and seconds with the difference we have got.
// Processing time difference
var day = Math.floor(findDifference / (1000 * 60 * 60 * 24));
var hour = Math.floor((findDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((findDifference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((findDifference % (1000 * 60)) / 1000); âWe will process these four components and display them into the browser via the id element, you can create a new div with the product countdown id value as follows.
<div id="product-countdown"></div> So in our javascript, we need to call the element id by using document.getElementById and display the four components into the div id we have specified.
document.getElementById("product-countdown").innerHTML = days + " Days " + hours + " Hours " + minutes + " Minutes " + seconds + " Seconds ";
4. Stops the countdown and displays EXPIRED when it's over
In this process, we have succeeded in creating a countdown timer for your product, but we will add the last element that serves to display EXPIRED if it has exceeded the time limit, this EXPIRED text will later change the hours, minutes and seconds into a text that we have previously specified. and stop the countdown process itself, you can add the Javascript syntax.
// If the countdown ends, then display EXPIRED
if (findDifference < 0) {
clearInterval(process);
document.getElementById("product-countdown").innerHTML = "EXPIRED";
} So the full version syntax is something like this:
<div id="product-countdown"></div>
<script>
// Set the date to set the timer
var DateProductExpired = new Date('2022-07-27 08:07:01').getTime();
// Update the timer every 1 second
var process = setInterval(function() {
// Calling the current date and time
var currenttime = new Date().getTime();
// Find the time and date difference between current and product data
var findDifference = DateProductExpired - currenttime;
// Processing time difference
var day = Math.floor(findDifference / (1000 * 60 * 60 * 24));
var hour = Math.floor((findDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((findDifference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((findDifference % (1000 * 60)) / 1000);
document.getElementById("product-countdown").innerHTML = days + " Days " + hours + " Hours " + minutes + " Minutes " + seconds + " Seconds ";
// If the countdown ends, then display EXPIRED
if (findDifference < 0) {
clearInterval(process);
document.getElementById("product-countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script> Creating a simple countdown timer is done, you can replace each variable name with the name you want.
Conclusion
Javascript can help you to make something more interesting and interactive for your website visitors, maybe not everyone can know how this countdown timer is made, I hope with this simple article, you can create a countdown timer for products on your website to make it interesting for visitors with the help of Javascript in it.
