Time since Indie was born

index.html

<div class="wrap">
  <h2>Time since <br>Indie was born     <small id="birthdate">08/31/2015 4PM</small></h2>
  <span class="heartbeat">Loading...</span>
  <p id="total"></p>
  <p id="secs"></p>
  <p id="mins"></p>
  <p id="hours"></p>
  <p id="days"></p>
  <p id="weeks"></p>
  <p id="months"></p>
  <p id="years"></p>
</div>
<script>
   document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementsByTagName("body")[0].className+='loaded'
  })
</script>

script.js

document.documentElement.className = 'js';

var born = new Date("October 2, 2016 12:00:00");

// Separate numbers into thousands using commas
function commafy( num){
  var parts = (''+(num<0?-num:num)).split("."), s=parts[0], L, i=L= s.length, o='';
  while(i--){ o = (i===0?'':((L-i)%3?'':',')) 
                  +s.charAt(i) +o }
  return (num<0?'-':'') + o + (parts[1] ? '.' + parts[1] : ''); 
}
function dateDiff() {
    
  var created = moment(born);
  now = moment();

  var time_diff = {
    second_diff: now.diff(created, 'seconds'),
    minute_diff: now.diff(created, 'minutes'),
    hour_diff: now.diff(created, 'hours'),
    day_diff: now.diff(created, 'days'),
    week_diff: now.diff(created, 'week'),
    month_diff: now.diff(created, 'Months'),
    year_diff: now.diff(created, 'Years')
  }
  time_diff.day_suffix = (time_diff.day_diff > 1) ? " Days" : " Day";
  time_diff.week_suffix = (time_diff.week_diff > 1) ? " Weeks" : " Week";
  time_diff.month_suffix = (time_diff.month_diff > 1) ? " Months" : " Month";
  time_diff.year_suffix = (time_diff.year_diff === 1) ? " Year" : " Years";

  document.getElementById("secs").innerHTML  = commafy(time_diff.second_diff) + " Seconds";
  document.getElementById("mins").innerHTML  = commafy(time_diff.minute_diff) + " Minutes";
  document.getElementById("hours").innerHTML = commafy(time_diff.hour_diff) + " Hours";
  document.getElementById("days").innerHTML  = commafy(time_diff.day_diff) + time_diff.day_suffix;
  document.getElementById("weeks").innerHTML = commafy(time_diff.week_diff) + time_diff.week_suffix;
  document.getElementById("months").innerHTML = commafy(time_diff.month_diff) + time_diff.month_suffix;
  if(time_diff.year_diff > 0){
    document.getElementById("years").innerHTML = commafy(time_diff.year_diff) + time_diff.year_suffix;
  }

  // Use countdown js library to produce a sectional breakdown 
  document.getElementById("total").innerHTML = countdown( born ).toString();

  setTimeout(function() {
    dateDiff();
  }, 1000);
}
window.onload = dateDiff();


function formatDate(date) {
  var monthNames = [
    "January", "February", "March",
    "April", "May", "June", "July",
    "August", "September", "October",
    "November", "December"
  ];

  var day = date.getDate();
  var monthIndex = date.getMonth();
  var year = date.getFullYear();

  return monthNames[monthIndex]  + ' ' + day + ' ' + year;
}
window.onload = function(){
  document.getElementById("birthdate").innerHTML = formatDate(born); 
}

// var getDaysInMonth = function(month,year,zero=true) {
  
//   if(zero == true){
//     // Here January is 0 based  
//     return new Date(year, month+1, 0).getDate();
//   } else {
//     // Here January is 1 based
//     // Day 0 is the last day in the previous month
//    return new Date(year, month, 0).getDate();
//   }
// }

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countdown/2.6.0/countdown.min.js"></script>

style.scss

@import "compass";
@import "compass/css3";

// $bg-color1: #3DE6B9;
// $bg-color2: #07D0F9;
$bg-color1: fade-out(#fc102b, .1);
$bg-color2: fade-out(#ed7ff9, .2);

$text-color: #fff;
$heartbeat-color: #fff;
$heartbeat-size: 36px; // must be divisible by 2 and 3
$heartbeat-rotation: rotate(45deg);

* {
  transition: 1s all;
  font-family: 'Cinzel', serif;
}
html {
  font-size: 16px;
  
  background: url("https://giant.gfycat.com/NarrowConcernedAmberpenshell.gif") no-repeat;
  background-position: 68% 30%;
  background-size: cover;
  height: 100%;
  
  
}
body {
  padding: 0;
  margin: 0;
  height: 100%;
  text-align: center;
  
  @include background-image(linear-gradient(to bottom right, $bg-color1, $bg-color2) );
  background-size: 180% 180%;
  $seconds: 6.4s;
  -webkit-animation: AnimationName $seconds ease infinite;
  -moz-animation: AnimationName $seconds ease infinite;
  animation: AnimationName $seconds ease infinite;

  @-webkit-keyframes AnimationName {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  @-moz-keyframes AnimationName {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  @keyframes AnimationName { 
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
}
h2 {
  color: $text-color;
  font-size: 2rem;
  text-align: center;
  padding-top: 0;
  margin-bottom: 10px;
  line-height: 1;
  
  @include transform-origin(50%, 50%);
}
p {
  color: $text-color;
  font-size: 1.3rem;
}
small{
  color: $text-color;
  display: block;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.wrap {
  margin: 3% auto 0 auto;
  display:inline-block;
  padding: 20px;
}


@keyframes beat{
	to { @include transform( $heartbeat-rotation scale(1.3) ); }
}

.heartbeat {
  animation: beat .5s infinite alternate;
  
  font-family: sans-serif;
  font-weight: 100;
  
  display: inline-block;
  position: relative;  
  overflow: hidden;
  text-indent: -9999px;
  margin-bottom: 10px;
  width: $heartbeat-size;  
  height: $heartbeat-size;
  @include transform($heartbeat-rotation scale(1));
  @include transform-origin(50%, 50%);
  
  &:after, &:before {
    position: absolute;
    content: "";  
    background: $heartbeat-color;
  }
  
  &:before {
    @include border-left-radius($heartbeat-size / 3);
    top: ($heartbeat-size/3);
    left: 0;
    width: $heartbeat-size;
    height: (2 * $heartbeat-size / 3);
  }
  
  &:after {
    @include border-top-radius($heartbeat-size / 3);
    top: 0;
    left: ($heartbeat-size / 3);
    width: (2 * $heartbeat-size / 3);
    height: ($heartbeat-size / 3);
  }
}

.js .wrap {
  opacity: 0;
  transition: 3s all;
}
.js body.loaded .wrap{
  opacity: 1;
}

styles

<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet" />

time-since-indie-was-born.markdown

Time since Indie was born

I was curious to know how old my niece was. This serves as a handy quick reference.

A Pen by FaceLord on CodePen.

License.