jQuery Countdown Timer without any Library

| Page Views: 42

How to Create a Countdown Timer using jQuery without any Library

This tutorial and examples allows you to create a professional countdown-timer with just jQuery, HTML and CSS. No third party plugin or library is needed.

Let's go.

Countdown Timer jQuery

Video Tutorial

You can view the video tutorial below. It has more explanations on what we are doing.

(a). style.css
.countdown{font-family: arial; text-transform: uppercase;}
/* let's select div inside countdown class */
.countdown > div{display: inline-block;}
/* let's select span inside div inside countdown class */
.countdown > div > span{display: block; text-align: center;}
.countdown-container{margin:0 3px;}
.countdown-container .countdown-heading{font-size: 11px; margin: 3px; color: #666}
.countdown-container .countdown-value{font-size: 50px; background: #6273c9;
     padding:10px; color:#fff; text-shadow: 2px 2px 2px rgba(0,0,0,0.4)}
(b). index.js

This is where we write our main react code.

/**
 * The below function is defined as IIFE(Immediately Invoked Function Expression)
 * That's why it's wrapped in braces and followed by braces for executing the
 * funstion. However it's also taking jquery as a parameter.
 */
(function ( $ ) {
    //Note that $ in jQuery referes to jQuery object. It's a syntactic sugar
    function pad(n) {
        return (n < 10) ? ("0" + n) : n;
    }

    //Now beow we are assigning function as a parameter.
    $.fn.showclock = function() {

        var currentDate=new Date();
        var fieldDate=$(this).data('date').split('-');
        var fieldTime=[0,0];

        if($(this).data('time') != undefined)
            fieldTime=$(this).data('time').split(':');
            var futureDate=new Date(fieldDate[0],fieldDate[1]-1,fieldDate[2],fieldTime[0],fieldTime[1]);
            var seconds=futureDate.getTime() / 1000 - currentDate.getTime() / 1000;

        if(seconds<=0 || isNaN(seconds)){
            this.hide();
            return this;
        }

        //floor returns the greatest integer less than or equal to its numeric argument.
        var days=Math.floor(seconds/86400);
        seconds=seconds%86400;

        var hours=Math.floor(seconds/3600);
        seconds=seconds%3600;

        var minutes=Math.floor(seconds/60);
        seconds=Math.floor(seconds%60);

        var html="";

        if(days!=0){
            html+="<div class='countdown-container days'>"
                html+="<span class='countdown-heading days-top'>Days</span>";
                html+="<span class='countdown-value days-bottom'>"+pad(days)+"</span>";
            html+="</div>";
        }

        html+="<div class='countdown-container hours'>"
            html+="<span class='countdown-heading hours-top'>Hours</span>";
            html+="<span class='countdown-value hours-bottom'>"+pad(hours)+"</span>";
        html+="</div>";

        html+="<div class='countdown-container minutes'>"
            html+="<span class='countdown-heading minutes-top'>Minutes</span>";
            html+="<span class='countdown-value minutes-bottom'>"+pad(minutes)+"</span>";
        html+="</div>";

        html+="<div class='countdown-container seconds'>"
            html+="<span class='countdown-heading seconds-top'>Seconds</span>";
            html+="<span class='countdown-value seconds-bottom'>"+pad(seconds)+"</span>";
        html+="</div>";

        this.html(html);
    };

    //create a function and assign it as to our countdown
    $.fn.countdown = function() {
        var el=$(this);
        el.showclock();
        setInterval(function(){
            el.showclock();
        },1000);

    }
//Our IIFE is executed beow with jQuery passed as a parameter,
}(jQuery));

//ready() function is how jQuery detects that the DOM is ready or loaded completely
jQuery(document).ready(function(){
    if(jQuery(".countdown").length > 0){

        //jquery.each iterates over jQuery object while allowing us execute a
        //function
        jQuery(".countdown").each(function(){
            jQuery(this).countdown();
        })

    }
})
//end
(c)index.html

This is our main html public file.

<!doctype html>
<html>

<head>
  <title>Countdown Timer</title>
  <link rel="stylesheet" type="text/css" href="css/countdown.css" />
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="js/countdown.js"></script>
  <style>
    html {
      height: 100vh;
    }

    body {
      background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
    }

    .title{
      color: cadetblue;
      font-style: oblique;
    }
    .container {
      margin: 150px auto;
      max-width: 640px;
    }
  </style>
</head>

<body>

  <div class="container">
    <h1 class="title">Days To Next Christmas</h1>
    <div class='countdown' data-date="2019-12-25"></div>
  </div>

</body>

</html>
<!-- end -->
Download

You can download the full source code below or watch the video from the link provided.

No. Location Link
1. GitHub Direct Download
2. GitHub Browse
3. YouTube Video Tutorial
4. YouTube ProgrammingWizards TV Channel

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.




Recommendations


What do You Think


Previous Post Next Post