Pomodoro Clock

index.html

body(background="http://cms.bbcomcdn.com/fun/images/2008/bg262.jpg")
  h1 FreeCodeCamp Training Program
  main(ng-app='PomodoroApp' ng-controller='MainCtrl')
    header
      .session
        .breakCtrl
          p Rest Time
          button.btn.btn-circle.btn-danger(ng-click='scheduleChange(-1,"rest")').minus
            i.glyphicon.glyphicon-minus
          span.time {{breakLength}}
          button.btn.btn-circle.btn-success(ng-click='scheduleChange(1,"rest")').plus
            i.glyphicon.glyphicon-plus
        .sessionCtrl
          p Workout Session
          button.btn.btn-circle.btn-danger(ng-click='scheduleChange(-1,"session")').minus
            i.glyphicon.glyphicon-minus
          span.time {{sessionLength}}
          button.btn.btn-circle.btn-success(ng-click='scheduleChange(1,"session")').plus
            i.glyphicon.glyphicon-plus
    section(ng-click='startTimer()')
      .timer
        p.title.workout {{sessionName}}
        p.title.rest {{breakName}}
        p 
          timer(interval="1000",max-time-unit="'hour'",countdown="sessionSecs",autostart="false",finish-callback='workoutFinished()') 
            {{hhours}}:{{mminutes}}:{{sseconds}}
          .duration {{session}}
        span.fill(ng-style="{'height':fillHeight, 'background':fillColor }")

Pomodoro Clock.markdown

Pomodoro Clock

A Pen by Harshit Anand on CodePen.

License.

script.js

angular.module "PomodoroApp",['timer']
  .controller "MainCtrl", ($scope,$interval)->
    $scope.rest = 5
    $scope.breakLength = $scope.rest + " min"
    $scope.session = 25
    $scope.sessionLength = $scope.session + " min"
    $scope.sessionName = "Workout"
    $scope.breakName = "Rest!"
    $scope.sessionSecs = 60 * $scope.session
    timerStatus = false
    $('timer').hide()
    $('.rest').hide()
    
    $scope.scheduleChange = (iter,initiatedBy)->
      if not timerStatus
        switch initiatedBy
          when "rest"
            $scope.rest = $scope.rest+iter if $scope.rest+iter >= 1
            $scope.breakLength = $scope.rest + " min"
          when "session"
            $('timer').hide(600)
            $('.duration').show(200)
            $scope.session = $scope.session+iter if $scope.session+iter >= 1
            $scope.sessionSecs = 60 * $scope.session + 60*iter
            $scope.$broadcast 'timer-reset'
            $scope.sessionLength = $scope.session + " min"
    
    $scope.startTimer = ()->
      $('.workout').show(600)
      $('.rest').hide()
      $('timer').show(600)
      $('.duration').hide(200)
      if timerStatus
        $scope.$broadcast 'timer-stop'
        timerStatus = false
      else
        $scope.sessionSecs = 60 * $scope.session
        $scope.$broadcast 'timer-start'
        timerStatus = true     
        
    $scope.workoutFinished = ()->
      $('.workout').hide()
      $('.rest').show(600)
      $scope.sessionSecs = 60 * $scope.rest
      $scope.$broadcast 'timer-start'
      timerStatus = false
        
      
      
      
      
      
        

scripts

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-timer/1.3.3/angular-timer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<script src="https://raw.githubusercontent.com/EvanHahn/HumanizeDuration.js/master/humanize-duration.js"></script>

style.css

@import "bourbon";

@import url(http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300);

// colors
$green: #99CC00;
$black: #333333;
$white: #fff;

// variables
$font: Open Sans, Arial;
  
* {
  margin: 0;
  font-family: 'Pacifico';
}

html, body, main {
  height: 100%;
  overflow: hidden;
}

h1 {
  display: block;
  margin: 0 auto;
  color: white;
  text-align: center;
  font-family: 'Pacifico';
  font-size: 5em;
}

header {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  color: $white;
  text-transform: uppercase;
  padding: 20px;
  
  .session {
    margin-top: 60px;
    font-size: 1em;
    display: flex;
    .breakCtrl, .sessionCtrl {
      display: inline;
      padding-left: 30px;
      padding-right: 30px;
    }
    .minus, .plus {
      width: 30px;
      height: 30px;
      color: $white;
      border-radius: 15px;
      text-align: center;
      padding: 6px 0;
      cursor: pointer;
      font-size: 12px;
      outline: none;
    }
    
    .time {
      font-size: 2.5em;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}

section {
  height: 100%;
  color: $white;
  .title {
    text-align: center;
    line-height: 150px;
    font-size: .8em;
  }
  .timer {
    margin: 0 auto;
    text-align: center;
    width: 300px;
    height: 300px;
    font-size: 4em;
    border: 2px solid $green;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 20;
    overflow: hidden;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 50%;
      z-index: 2;
      border: 4px solid $black;
    }
  }
  .fill {
    content: '';
    position: absolute;
    background: $green;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />