Create a Countdown with JavaScript and jQuery

Below is the code to create a timer countdown using HTML, SASS, ES6 JavaScript and jQuery. The target date is December 31. Please contact me at maria@mclinteractive.com if you have any questions.

Demo

December 31 at Midnight

Days

Hrs

Mins

Secs

Resources

Dependency. The jQuery Library can be included at the bottom of the html document just above the </body>.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Description

We used the Date object to get the current and target dates. In addition, we created a counter to tick the seconds. The styles are provided below.

JavaScript

If you don’t use development tools such as Webpack, compile the ES6 Javascript displayed below with Babel, and place it below the JQuery library.

<script>
(function($) {
    const Countdown = {

        init(el) {

            let self = this;

            self.options = {
                'timeStamp': new Date().getTime(),
                'counter': 0,
                'currentTime':0
            };
            self.setClock(el);

        },

        setClock(el) {

            let self = this;

            let clock = setInterval(function () {
                self.setTime(el);
            }, 1000);

            self.clock = clock;
            self.setTime(el);
        },

        setTime(el) {
            let self = this,
                gapTime,
                daysGap = el.find('.days'),
                hoursGap = el.find('.hours'),
                minutesGap = el.find('.minutes'),
                secondsGap = el.find('.seconds'),
                endTime = new Date(new Date().getFullYear()+1, (1 - 1), (1), 0, 0, 0, 0); //12/31 midnight remember Months are zero based. Making the end date the date FOLLOWING the "official" date at midnight. 
            let setSingleDigits = (val) => {
                var formatVal = (val < 10) ? ("0" + val) : val.toString();
                return formatVal;
            };  
            
            endTime = endTime.getTime();

            self.options.currentTime = (self.options.counter === 0) ? self.options.timeStamp : (self.options.currentTime + 1000); 

            gapTime = parseInt(endTime) - parseInt(self.options.currentTime);

            if (gapTime < 0) {

                clearInterval(self.clock); // stop the clock

                $(daysGap).text("00");
                $(hoursGap).text("00");
                $(minutesGap).text("00");
                $(secondsGap).text("00");

            } else {

                let msPerDay = 24 * 60 * 60 * 1000,
                    msPerHour = 60 * 60 * 1000,
                    msPerMinute = 60 * 1000,
                    msPerSecond = 1000,

                    days = setSingleDigits(Math.floor(gapTime / msPerDay)),
                    hours = setSingleDigits(Math.floor((gapTime % msPerDay) / msPerHour)),
                    minutes = setSingleDigits(Math.floor(( gapTime % msPerHour) / msPerMinute)),
                    seconds = setSingleDigits(Math.floor((gapTime % msPerMinute) / msPerSecond));

                $(daysGap).text(days);
                $(hoursGap).text(hours);
                $(minutesGap).text(minutes);
                $(secondsGap).text(seconds);
            }

            self.options.counter = self.options.counter + 1;

        }
    };

    $(function () { // ON DOM READY

        if ($('#countdown').length > 0) {

            $('#countdown').each(function () {
                const countdownObj = $(this);
                Countdown.init(countdownObj);
            });
        }
    });
}(jQuery));
</script>

HTML

Place the HTML displayed below somewhere in your page between the <body> and <\body>.

<section id="countdown">
   <div class="end-date">December 31 at Midnight</div>
   <div class="label-wrapper"><div>Days</div><div>Hrs</div><div>Mins</div><div>Secs</div></div>
   <div class="clock-wrapper"><div class="days">00</div><div class="hours">00</div><div class="minutes">00</div><div class="seconds">00</div></div>
</section>

SASS

Process the SASS displayed below to obtain the CSS, which should be placed somewhere between the <head> and <\head>.

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
$black:#000;
$darkgray: #555;
$gray: #f4f4f4;
$white: #fff;
body { 
    width:100%;
    background:$gray;
    color:$black;
}
#countdown { 
    background-color: $darkgray;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
}
.label-wrapper div, .clock-wrapper div { 
    display:inline-block; 
    width:50px; 
    color:$white;
    text-align:center;
}

Maria C. Lima

Maria is an esteemed and celebrated independent web developer based in New York City. Her design and development work shows tremendous passion and insight, which she brings to all of her clients and projects with love, professionalism, and an esteemed work ethic admired by all who partner with Maria.

Create a Countdown with JavaScript and jQuery