JS Countdown timer

Timer

by Brent Coder

HTML

<div id="countdown_timer">
<h1>
Eastlink Wireless Coming Soon
</h1>
<div id="countdown_timer_inside">
<div class="timer_boxes"><span class="timer_boxes_text" id="timer_days"></span></div>
<p class="count_down_text">DAYS</p>
<div class="timer_boxes"><span class="timer_boxes_text" id="timer_hours"></span></div>
<p class="count_down_text">HOURS</p>
<div class="timer_boxes"><span class="timer_boxes_text" id="timer_minutes"></span></div>
<p class="count_down_text">MINUTES</p>
<div class="timer_boxes"><span  class="timer_boxes_text" id="timer_seconds"></span></div>
<p class="count_down_text">SECONDS</p>
</div>
</div>

CSS

#countdown_timer {
    top: 160px;
    left: 160px;
    width: 900px;
    position: relative;
}

#countdown_timer_inside {
    width: 700px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

#countdown_timer h1{
  text-align: center;
}

.timer_boxes {
  display: block;
  width: 150px;
  height: 150px;
  background: #332a85;
  float: left;
  margin-left: 10px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
   border-radius: 20px;
}

.timer_boxes_text {
  font-size: 120px;
  color: #fff;
  padding: 16px;
}

.count_down_text {
  width: 100px;
  height: 100px;
  float: left;
  display: block;
  margin-top: 155px;
  margin-left: -135px;
}

JavaScript

// Set the date we're counting down to
var countDownDate = new Date("June 8, 2017 9:30: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 an 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);
    
    // Output the result in an element with id= blocks
    document.getElementById("timer_days").innerHTML = days;
    document.getElementById("timer_hours").innerHTML = hours;
    document.getElementById("timer_minutes").innerHTML = minutes;
    document.getElementById("timer_seconds").innerHTML = seconds;
    
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown_timer_inside").innerHTML = "Eastlink Wireless Here Now";
    }
}, 1000);