A Countdown Timer is a feature that you can install on your website to know users about an upcoming event, and counting down the time left for that event. A countdown timer can be built using various languages, but here I am going to discuss with you how to create a countdown timer using jQuery as the primary language to code. Obviously you will need to use HTML to display the countdown timer and style it using CSS. Apart from that, the tutorial is going to be a very simple and easy to follow one.
Before we get ahead with this tutorial, here are a few other tutorials that might interest you. They are the most popular tutorials browsed on Slash Coding.
- Create a Collapsible element using JavaScript
- Read URL Parameters using jQuery
- Create a custom content scrollbar using jQuery
Countdown Timer using jQuery
Now, creating a countdown timer using jQuery is not difficult at all. The steps are pretty easy to follow and they consist of three main parts. The HTML part, which will guide you in placing the countdown timer on your web page, the CSS part which will help you to style it and finally the jQuery or JavaScript part that will control the countdown timer. For the sake of simplicity in this tutorial, I will use a jQuery plugin already developed by Martin Angelov, which is available on Github for free. You need to download the source code from Github.
HTML
Since we are using a jQuery plugin, we really don’t need to do much on the HTML part. We just need to create our own page as we would normally do, and then provide a container element (preferably a div tag) that will hold our entire countdown timer and a special note element (preferably a paragraph tag) which will display our text below the countdown timer. Here is the basic HTML code for such a page. Feel free to use it on your other pages by just keeping in mind the two elements I mentioned about earlier.
<!DOCTYPE html> <html> <head> <title>jQuery Countdown Timer</title> </head> <body> <div id="countdown" style="margin-top:50px;"></div> <p id="note" style="text-align:center;"></p> </body> </html>
CSS
Again, since we are using a plugin, we don’t really need to style our countdown timer with anything. The basic design of the countdown timer is like the one you see above in the screenshot. If you want to change that, you’ll need to work outside the scope of this article and change it yourself. If you need some help, feel free to contact me or use the comments section below. However, we need to include the following CSS file with our HTML. Include this anywhere in the header tag on the website (just before closing head).
<link rel="stylesheet" href="css/jquery.countdown.css" />
JavaScript/jQuery
Now this is the fun part for the entire tutorial. This is where the magic happens. If you see the web page that you’ve built till now, you’ll find a blank page with nothing actually working there. In order to get it to work, we need to use the following lines of JavaScript. We import the jQuery library first and then include the plugin file that you downloaded earlier. Next, we write a set of codes for our specific countdown timer to work. You can change the values(date and the message that is displayed at the bottom) as per your needs. Put the following code right before closing the body tag. In this example, I’ve used 1st August as the date to countdown (month starts from 0).
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/jquery.countdown.js"></script>
<script type="text/javascript">
$(function(){
var note = $('#note'),
ts = new Date(2015, 7, 1);
$('#countdown').countdown({
timestamp : ts,
callback : function(days, hours, minutes, seconds){
var message = "";
message += days + " day" + ( days==1 ? '':'s' ) + ", ";
message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";
message += "left for 1st August!";
note.html(message);
}
});
});
</script>
The tutorial above guides you how to create your own countdown timer using jQuery to showcase important events on your website or any webpage easily. If you found some steps in the above tutorial difficult to follow, feel free to leave a comment down below and I will be happy to help you out with whatever you need. Also, don’t forget to follow Slash Coding on various social media and get in touch with me if you need any help ever. I’ll be happy to help!
thanks nice article. i am new to javascript . A suggestion that a demo button should also be there to showcase the result