Countdown Timer – Custom Built Using HTML, Javascript, and CSS

Code by https://wplearninglab.com/countdown-timer/

by Megi93

HTML

<div class="countdown-wrap">
   <div id="clockdiv">
      <div>
         <span class="days"></span>
         <span class="time-label">DAYS</span>
      </div>
      <div>
         <span class="hours"></span>
         <span class="time-label">HOURS</span>
      </div>
      <div>
         <span class="minutes"></span>
         <span class="time-label">MINUTES</span>
      </div>
      <div>
         <span class="seconds"></span>
         <span class="time-label">SECS</span>
      </div>
   </div>
</div>

CSS

body {
   font: normal 13px/20px Arial, Helvetica, sans-serif;
   word-wrap: break-word;
   color: #eee;
   background: #353535;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   height: 100vh;
}

/************ Timer Styles *************/

.countdown-wrap:before {
   content: "";
   width: 8px;
   height: 65px;
   background: #444;
   background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
   background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
   background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
   background-image: -o-linear-gradient(top, #555, #444, #444, #555);
   border: 1px solid #111;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
   display: block;
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
   left: -10px;
}

.countdown-wrap {
   width: 100%;
   max-width: 465px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
}

div#clockdiv {
   text-align: center;
   background: #222;
   background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
   background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
   background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
   background-image: -o-linear-gradient(top, #222, #333, #333, #222);
   border: 1px solid #111;
   border-radius: 5px;
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
   margin: auto;
   padding: 24px 0 17px;
}

.countdown-wrap:after {
   content: "";
   width: 8px;
   height: 65px;
   background: #444;
   background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
   background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
   background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
   background-image:...

JavaScript

var timeInMinutes = 10;
var currentTime = Date.parse(new Date());
var deadline = new Date(currentTime + timeInMinutes * 60 * 1000);


function getTimeRemaining(endtime) {
   var t = Date.parse(endtime) - Date.parse(new Date());
   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);

   function updateClock() {
      var t = getTimeRemaining(endtime);
      var daysSpan = clock.querySelector('.days');
      var hoursSpan = clock.querySelector('.hours');
      var minutesSpan = clock.querySelector('.minutes');
      var secondsSpan = clock.querySelector('.seconds');
      daysSpan.innerHTML = t.days;
      hoursSpan.innerHTML = t.hours;
      minutesSpan.innerHTML = t.minutes;
      secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
      if (t.total <= 0) {
         // Redirect if the Countdown is Over
         window.location.href = "https://www.google.com";
      }

   }

   updateClock(); // run function once at first to avoid delay
   var timeinterval = setInterval(updateClock, 1000);
}

initializeClock('clockdiv', deadline);