Time since Cadence was born

index.html

<div class="wrap">
  <h2>Time since <br>Cadence was born</h2>
  <span class="heartbeat">Loading...</span>
  <p id="secs"></p>
  <p id="mins"></p>
  <p id="hours"></p>
  <p id="days"></p>
  <p id="weeks"></p>
</div>

script.js

function dateDiff() {
    var born = new Date("August 31, 2015 04:0:00")
  
    var created = born
    today = new Date()

    var one_sec = 1000
    var one_min = 1000 * 60
    var one_hour = 1000 * 60 * 60
    var one_day = 1000 * 60 * 60 * 24
    var one_week = 1000 * 60 * 60 * 24 * 7
    //var one_month = 1000 * 60 * 60 * 24 * 7

    var x;
    var y;

    Math.ceil((today.getTime() - created.getTime()) / (one_day)) > 1 ? x = " Days" : x = " Day";
    Math.ceil((today.getTime() - created.getTime()) / (one_week)) > 1 ? y = " Weeks" : y = " Week";

    document.getElementById("secs").innerHTML = Math.ceil((today.getTime() - created.getTime()) / (one_sec)) + " Seconds";
    document.getElementById("mins").innerHTML = Math.ceil((today.getTime() - created.getTime()) / (one_min)) + " Minutes";
    document.getElementById("hours").innerHTML = Math.ceil((today.getTime() - created.getTime()) / (one_hour)) + " Hours";
    document.getElementById("days").innerHTML = Math.ceil((today.getTime() - created.getTime()) / (one_day)) + x;
    document.getElementById("weeks").innerHTML = Math.ceil((today.getTime() - created.getTime()) / (one_week)) + y;

    setTimeout(function() {
        dateDiff();
    }, 1000);
}

window.onload = dateDiff();

style.css

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

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

@import url("http://fonts.googleapis.com/css?family=Cinzel");
* {
  transition: 1s all;
  font-family: 'Cinzel' serif;
}
html {
  font-size: 16px;
  @include background-image(linear-gradient(to bottom right, #3DE6B9, #07D0F9));
  height: 100%;
  
    /*background: linear-gradient(270deg, #3DE6B9, #07D0F9);*/
  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%}
  }
}
body {
  padding: 0;
  margin: 0;
  height: 100%;
  text-align: center;
}
h2 {
  color: $text-color;
  font-size: 2rem;
  text-align: center;
  padding-top: 0;
  
  @include transform-origin(50%, 50%);
}
p {
  color: $text-color;
  font-size: 1.3rem;
}
.wrap {
  margin: 3% auto 0 auto;
  display:inline-block;
}



@include keyframes(heartbeat) {
  0%  { @include transform($heartbeat-rotation scale(1));   }
  14% { @include transform($heartbeat-rotation scale(1.3)); }
  28% { @include transform($heartbeat-rotation scale(1));   }
  42% { @include transform($heartbeat-rotation scale(1.3)); }
  70% { @include transform($heartbeat-rotation scale(1));   }
}
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} { @content }
  @-moz-keyframes #{$name} { @content }
  @-o-keyframes #{$name} { @content }
  @keyframes #{$name} { @content }
}

/* Styles for old versions of IE */
.heartbeat {
  font-family: sans-serif;
  font-weight: 100;
  @include transform( rotate(0deg) );
}

/* :not(:required) hides this rule from IE9 and below */
.heartbeat:not(:required) {
  @include animation(heartbeat 1500ms ease 0s infinite normal);
  
  display: inline-block;
  position: relative;  
  overflow: hidden;
  text-indent: -9999px;
  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);
  }
}

Time since Cadence was born.markdown

Time since Cadence 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.