ClockFreeCodeCamp

Tutorials of (Clockfreecodecamp) by Kevin angga

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>ClockFreeCodeCamp</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div ng-app="PomodoroTimer">
  <div ng-controller="PomodoroCtrl">
    <div class="row">
      <div class="col-md-6">
        <p>Session Length</p> 
        <button class="btn btn-primary" ng-click="changeSession(1)">+</button> 
        {{result}}
        <button class="btn btn-danger" ng-click="changeSession(-1)">-</button>
      </div>
      <div class="col-md-6">
        <p>Break Length</p>
        <button class="btn btn-primary" ng-click="changeBreak(1)">+</button>
        {{break}}
        <button class="btn btn-danger" ng-click="changeBreak(-1)">-</button>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-md-offset-4">
       <p>{{sessiontime|formatTimer}}</p>
        <p>{{sessionbreak|formatTimer}}</p>
       <button ng-click="startTime()">mulai</button>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.text-center{
  margin-top:10px;
}
/* Downloaded from https://www.codeseek.co/ */
var PomodoroApp = angular.module("PomodoroTimer", []);

PomodoroApp.controller("PomodoroCtrl", function($scope, $timeout){
  $scope.result = 2;
  $scope.break = 1;
  $scope.sessiontime = $scope.result*60;
  $scope.sessionbreak = $scope.break*60;
  var mytimeout;
  $scope.stoped = true;

  $scope.changeBreak = function(a){
    if($scope.break < 1){
      $scope.break = 1;
    }
    $scope.break = $scope.break + a;
    $scope.sessionbreak = $scope.break*60;
  }
  
  $scope.changeSession = function(a){
    $timeout.cancel(mytimeout);
    if($scope.result < 1){
      $scope.result = 1;
    }
    $scope.result = $scope.result + a;
    $scope.sessiontime = $scope.result*60;
  }
 
  $scope.CountDown = function(){
    if($scope.sessiontime === 0){
      $timeout.cancel(mytimeout);
        if($scope.sessionbreak === 0){
          $timeout.cancel(mytimeout);
        }else{
          $scope.sessionbreak--;
          mytimeout = $timeout($scope.CountDown,1000);
        }
    }else{
     $scope.sessiontime--;
     mytimeout = $timeout($scope.CountDown,1000); 
    }
  }
  
  $scope.startTime = function(){
    if(!$scope.stoped){
      $timeout.cancel(mytimeout);
    }else {
      mytimeout = $timeout($scope.CountDown,1000);
    }
    $scope.stoped =! $scope.stoped;
  }
});

PomodoroApp.filter('formatTimer', function() {
  return function(input)
    {
        function z(n) {return (n<10? '0' : '') + n;}
        var seconds = input % 60;
        var minutes = Math.floor(input / 60);
        var hours = Math.floor(minutes / 60);
        return (z(hours) +':'+z(minutes)+':'+z(seconds));
    };
});

This awesome code ( ClockFreeCodeCamp ) is write by kevin angga, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © kevin angga