Count Down Timer with zero

Added count down timer with zero functionality

by Suryar Praveen

HTML

<p class="blackfriday"></p>

CSS

.plan-box_scrollable-grid .plan-box_name {
  font-size: 1em;
}

.home .bundles .bundle:nth-child(n+2) ul.marketing-content-ul {
  background: url(https://s3-us-west-1.amazonaws.com/lycamobileuswebsite/lycamobile-au-cms/wp-content/uploads/2017/11/16130359/bf-icon1.png) no-repeat;
  background-position: top right;
  background-size: 100px 60px;
}

.page-id-602 .bundles .bundle:first-child ul.marketing-content-ul {
  background: url(https://s3-us-west-1.amazonaws.com/lycamobileuswebsite/lycamobile-au-cms/wp-content/uploads/2017/11/16130359/bf-icon2.png) no-repeat;
  background-position: top right;
  background-size: 85px 60px;
}

.page-id-602 .bundles .bundle:nth-child(n+2):nth-last-child(n+5) ul.marketing-content-ul {
  background: url(https://s3-us-west-1.amazonaws.com/lycamobileuswebsite/lycamobile-au-cms/wp-content/uploads/2017/11/16130359/bf-icon1.png) no-repeat;
  background-position: top right;
  background-size: 85px 60px;
}

ul.marketing-content-ul {
  background: none;
}

@media (max-width:767px) {
  .home .bundles .bundle:nth-child(n+2) ul.marketing-content-ul {
    background-image: none;
    position: relative;
  }
  .home .bundles .bundle:nth-child(n+2) ul.marketing-content-ul:after {
    content: '';
    background: url(https://s3-us-west-1.amazonaws.com/lycamobileuswebsite/lycamobile-au-cms/wp-content/uploads/2017/11/16130359/bf-icon1.png) no-repeat;
    background-position: bottom left;
    background-size: 50px 40px;
    position: absolute;
    left: -65px;
    bottom: -30px;
    width: 50px;
    height: 50px;
  }
  .page-id-602 .bundles .bundle:nth-child(n+2) ul.marketing-content-ul {
    background-image: none !important;
    position: relative;
  }
  .page-id-602 .bundles .bundle:nth-child(n+2) ul.marketing-content-ul:after {
    content: '';
    background: url(https://s3-us-west-1.amazonaws.com/lycamobileuswebsite/lycamobile-au-cms/wp-content/uploads/2017/11/16130359/bf-icon1.png) no-repeat;
    background-position: bottom left;
   ...

JavaScript

// Set the date we're counting down to
var countDownDate = new Date("Nov 26, 2018 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  var day = (days < 10) ? "0" + days : days;
  var hour = (hours < 10) ? "0" + hours : hours;
  var minute = (minutes < 10) ? "0" + minutes : minutes;
  var second = (seconds < 10) ? "0" + seconds : seconds;

  var x = document.querySelectorAll('.blackfriday');
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].innerHTML = "<div class='black-box'><span class='black-text'>DAYS</span><br><span class='black-number'>" + day + "</span></div><div class='black-box'><span class='black-text'>HOURS</span><br><span class='black-number'>" + hour + " : </span></div><div class='black-box'><span class='black-text'>MINUTES</span><br><span class='black-number'>" + minute + "</span></div><div class='black-box'><span class='black-text'>SECONDS</span><br><span class='black-number'>" + second + "</span></div>";

  }


  // If the count down is over, write some text
  if (distance < 0) {
    clearInterval(x);
    var y = document.querySelectorAll('.blackfriday');
    var j;
    for (j = 0; j < y.length; j++) {
      y[j].innerHTML = "EXPIRED";
    }
  }
}, 1000);