Countup and Countdown

countup-and-countdown.markdown

Countup and Countdown

A countdown to a specific date that animates up from 0 and then starts the countdown.

A Pen by Nikita Dudnik on CodePen.

License.

index.html

<span id="container">
  <div id="title">COUNTDOWN TO TRYSIL</div>
<ul id="countdown">
  <li id="days">
    <div class="number">00</div>
    <div class="label">Days</div>
  </li>
  <li id="hours">
    <div class="number">00</div>
    <div class="label">Hours</div>
  </li>
  <li id="minutes">
    <div class="number">00</div>
    <div class="label">Minutes</div>
  </li>
  </ul>
  
</span>

script.js

/* --------------------------
 * GLOBAL VARS
 * -------------------------- */
// The date you want to count down to
var targetDate = new Date("2016/12/25 00:00:00");   

// Other date related variables
var days;
var hrs;
var min;
var sec;

/* --------------------------
 * ON DOCUMENT LOAD
 * -------------------------- */
$(function() {
   // Calculate time until launch date
   timeToLaunch();
  // Transition the current countdown from 0 
  numberTransition('#days .number', days, 1000, 'easeOutQuad');
  numberTransition('#hours .number', hrs, 1000, 'easeOutQuad');
  numberTransition('#minutes .number', min, 1000, 'easeOutQuad');
  numberTransition('#seconds .number', sec, 1000, 'easeOutQuad');
  // Begin Countdown
  setTimeout(countDownTimer,1001);
});

/* --------------------------
 * FIGURE OUT THE AMOUNT OF 
   TIME LEFT BEFORE LAUNCH
 * -------------------------- */
function timeToLaunch(){
    // Get the current date
    var currentDate = new Date();

    // Find the difference between dates
    var diff = (currentDate - targetDate)/1000;
    var diff = Math.abs(Math.floor(diff));  

    // Check number of days until target
    days = Math.floor(diff/(24*60*60));
    sec = diff - days * 24*60*60;

    // Check number of hours until target
    hrs = Math.floor(sec/(60*60));
    sec = sec - hrs * 60*60;

    // Check number of minutes until target
    min = Math.floor(sec/(60));
    sec = sec - min * 60;
}

/* --------------------------
 * DISPLAY THE CURRENT 
   COUNT TO LAUNCH
 * -------------------------- */
function countDownTimer(){ 
    
    // Figure out the time to launch
    timeToLaunch();
    
    // Write to countdown component
    $( "#days .number" ).text(days);
    $( "#hours .number" ).text(hrs);
    $( "#minutes .number" ).text(min);
    $( "#seconds .number" ).text(sec);
    
    // Repeat the check every second
    setTimeout(countDownTimer,1000);
}

/* --------------------------
 * TRANSITION NUMBERS FROM 0
   TO CURRENT TIME UNTIL LAUNCH
 * -------------------------- */
function numberTransition(id, endPoint, transitionDuration, transitionEase){
  // Transition numbers from 0 to the final number
  $({numberCount: $(id).text()}).animate({numberCount: endPoint}, {
      duration: transitionDuration,
      easing:transitionEase,
      step: function() {
        $(id).text(Math.floor(this.numberCount));
      },
      complete: function() {
        $(id).text(this.numberCount);
      }
   }); 
};

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

style.scss

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, html {
  height: 100%;
  display: grid;
  background-color: #000;
  background: url(https://www.trysil.com/contentassets/eec237e129724d59ae77a9aed343412d/trysil-sentrum.jpg);
}

span { /* thing to center */
  margin: auto;
}

#title {  
  font-family: 'Arial Narrow', Arial, sans-serif;
      font-size: 48px;
    text-align: center;
    color: #fff;
}

ul#countdown {
  position: relative;
  margin: 0 auto;
  padding: 15px 0 20px 0;
  color: #fff;
  overflow: hidden;
  font-family: 'Arial Narrow', Arial, sans-serif;
  
  li {
    margin: 0 -3px 0 0;
    padding: 0;
    display: inline-block;
    width: 33%;
    font-size: 72px;
    font-size: 6vw;
    text-align: center;
    
    .label {
      color: #fff;
      font-size: 18px;
      font-size: 1.5vw;
    }
  }
}