Angular Countdown Timer Directive

angular-countdown-timer-directive.markdown

Angular Countdown Timer Directive

An angular directive that starts a countdown timer to a date of doom... or just a birthday or release date or something.

A Pen by Gareth Weaver on CodePen.

License.

index.haml

.wrap{ :'ng-app' => 'app' }
  .time-to
    The world might end in...
    %span{ :'countdown' => '', :'date' => 'January 1, 2020 12:00:00' }  

script.coffeescript

angular.module 'app', []

.directive 'countdown', ['Util', '$interval', (Util, $interval) ->
  restrict: 'A'
  scope:
    date: '@'
  link: (scope, element) ->    
    future = new Date scope.date
    $interval ->
      diff = Math.floor (future.getTime() - new Date().getTime()) / 1000
      element.text  Util.dhms diff
    , 1000
    return
]

.factory 'Util', [ ->
  {
    dhms: (t) ->
      days = Math.floor t / 86400
      t -= days * 86400
      hours = Math.floor(t / 3600) % 24
      t -= hours * 3600
      minutes = Math.floor(t / 60) % 60
      t -= minutes * 60
      seconds = t % 60
      [ days + 'd', hours + 'h', minutes + 'm', seconds + 's' ].join ' '
  }
]

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

style.scss

@import '//fonts.googleapis.com/css?family=Bangers';

body { margin:0; }
.wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  background:black;
}
.time-to {
  text-align:center;
  font-family:Bangers;
  color:white;
  font-size:35px;
  letter-spacing:2px;
  span {
    display:block;
    font-size:80px;
    color:red;
  }
}