How to Create a Countdown Widget for your Website

This article will teach you how to add a countdown widget to your website using HTML, CSS, and JavaScript. Countdown widgets have many uses on the web, the most common of which you will find on websites with products or services that haven’t “launched” yet with a countdown widget displaying the time until their product and/or service launches.

Alternate common countdown widget uses are upcoming holidays, events, conferences, etc. A countdown widget has several use cases yet it provides a sense of urgency to your call to action as it is now time sensitive.

Below is the HTML, CSS, and JavaScript required to build a countdown widget for your website.

Step 1 — countdown-widget.html

Copy and paste the code below into your web page

<div class="container">
<div class="well">
   <div class="counter" id="clockdiv">
      <span class="title">Next Showing</span>
      <div class="sq">
         <span class="days bord">1</span> <span class="smalltext">Days</span>
      </div>
      <div class="sq">
         <span class="hours bord">22</span> <span class="smalltext">Hours</span>
      </div>
      <div class="sq">
         <span class="minutes bord">40</span> <span class="smalltext">Mins</span>
      </div>
      <div class="sq">
         <span class="seconds bord">45</span> <span class="smalltext">Secs</span>
      </div>
   </div>
</div>

Step 2 — countdown-widget.css

Download the CSS below and include it in your web page

countdown-widget.css

Step 3 — countdown-widget.js

Copy and paste the code below into a new page and include it on your site.

$( document ).ready(function() {
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  if (t<0) { return false; }
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');
  function updateClock() {
    var t = getTimeRemaining(endtime);
    if (t) {
      daysSpan.innerHTML = t.days;
      hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
      minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
      secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
    } else {
      clearInterval(timeinterval);
    }
  }
 
  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(); //today
deadline.setDate(deadline.getDate() + 7);
initializeClock('clockdiv', deadline);
});

Step 4 — Add your Includes

Add the references below to your web page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="countdown-widget.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="countdown-widget.css">

In this article, Solodev showed how to add a countdown widget to your website. Now you can take that same functionality and apply it to your website.

Demo on JSFiddle

Download from GitHub

Originally Posted on the Solodev Web Design Blog

Subscribe to the Solodev Web Design Blog for daily code tutorials delivered straight to your inbox!

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.