Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Creating 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.

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.

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

Download the file below and include it in your web page

$( 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.

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev