A Pen by Luke Galea.

A-Pen-by-Luke-Galea.markdown

A Pen by Luke Galea

A Pen by Luke Galea on CodePen.

License.

index.html

<div class="before">
  <div class="daysBefore"> 
    It's 
    <span class="days"></span>
    days before
  </div>
  
  <div class="hoursBefore">  
    It's 
    <span class="hours"></span>
    hours before
  </div>
</div>

<div class="open">
  It's open
</div>

script.js

$(function() {
  
  var daysAway, hoursAway, launchDate, now, isLaunched;
  
  launchDate = moment("09-17-2013 10:00 +5", "MM-DD-YYYY HH:mm Z");
  now = moment();
  daysAway = launchDate.diff(now, 'days');
  hoursAway = launchDate.diff(now, 'hours');
  isLaunched = now.isAfter(launchDate);
  
  $('.days').text(daysAway);
  $('.hours').text(hoursAway);
  
  $('.before').toggle(!isLaunched);
  $('.open').toggle(isLaunched);
  
  $('.daysBefore').toggle(hoursAway > 24);
  $('.hoursBefore').toggle(hoursAway <= 24);
  
});

style.css

.hidden {
  display: none;
}

Note, this requires http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js