ClockFreeCodeCamp

In this example below you will see how to do a ClockFreeCodeCamp with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by alberga, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alberga ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/alberga/clockfreecodecamp-aBBzjy */
.text-center{
  margin-top:10px;
}

/*Downloaded from https://www.codeseek.co/alberga/clockfreecodecamp-aBBzjy */
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));
    };
});

Comments