Easy Datetime Countdown Timer – Countdown.js

Preview:

Description:

An easy-to-style countdown timer implementation in pure JavaScript. It will display EXPIRED when the countdown is over.

How to use it:

Create the day/hour/minute/second slots for the countdown timer. And then specify the datetime you want to countdown from as these:

<div class="countdown" data-date="14-7-2017" data-time="12:00">
  <div class="day"><span class="num"></span><span class="word"></span></div>
  <div class="hour"><span class="num"></span><span class="word"></span></div>
  <div class="min"><span class="num"></span><span class="word"></span></div>
  <div class="sec"><span class="num"></span><span class="word"></span></div>
</div>

Place the JavaScript file ‘countdown.js’ at the bottom of the webpage.

<script src="countdown.js"></script>

Create a new countdown object to activate the countdown timer.

const myCountdown = new countdown({
  target: '.countdown',
  dayWord: ' days',
  hourWord: ' hours',
  minWord: ' mins',
  secWord: ' seconds'
});

Stylize the countdowm timer in the CSS.

.countdown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 20px;
  border: 1px solid black;
}
.countdown .day, .countdown .hour, .countdown .min, .countdown .sec {
  padding: 20px;
  text-align: center;
}
.countdown .day .num, .countdown .hour .num, .countdown .min .num, .countdown .sec .num {
  display: block;
  font-size: 40px;
}
.countdown .day .word, .countdown .hour .word, .countdown .min .word, .countdown .sec .word {
  display: block;
  font-size: 20px;
}

Changelog:

10/05/2018

• updated countdown.js