Skip to content

Instantly share code, notes, and snippets.

@grant-park

grant-park/Pomodoro Clock.markdown

Forked from anonymous/Pomodoro Clock.markdown
Created August 25, 2015 10:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save grant-park/0115737cf7f2f689bda3 to your computer and use it in GitHub Desktop.
Save grant-park/0115737cf7f2f689bda3 to your computer and use it in GitHub Desktop.
Download ZIP
Pomodoro Clock
Raw
index.html
<body ng-app="PomodoroClock">
<h1>Pomodoro Clock</h1>
<div ng-controller="MainController">
<div class="config2 text-center">
<ul>
<p id="break" class="label">Break</p>
<p id="work" class="label">Work</p>
</ul>
</div>
<div class="config text-center">
<ul>
<li><button ng-click="breakPlus()" id="breakPlus">+</button></li>
<li>{{break}}</li>
<li><button ng-click="breakMinus()" id="breakMinus">-</button></li>
</ul>
<ul>
<li><button ng-click="workPlus()" id="sessionPlus">+</button></li>
<li>{{work}}</li>
<li><button ng-click="workMinus()" id="sessionMinus">-</button></li>
</ul>
</div>
<div ng-click='startStop()' id="sessionTime">
<p>{{session}}</p>
<h2>{{message}}</h2>
</div>
<p class="text-center" style="color:white;margin-top:20px;">Click on the timer to start/stop.</p>
</div>
</body>
Raw
Pomodoro Clock.markdown
Raw
script.js
var app = angular.module('PomodoroClock',[]);
app.controller('MainController', function($scope,$interval){
var go = true;
var breaker = false;
var digits = 60;
$scope.break = 5;
$scope.work = 25;
$scope.message = "Work";
var primes = $scope.work - 1;
$scope.session = $scope.work;
$scope.breakPlus = function() {
$scope.break++;
}
$scope.breakMinus = function() {
if ($scope.break>1) {
$scope.break--;
}
}
$scope.workPlus = function() {
$scope.work++;
primes = $scope.work - 1;
digits = 60;
$scope.session = $scope.work;
}
$scope.workMinus = function() {
if ($scope.work > 1) {
$scope.work--;
primes = $scope.work - 1;
digits = 60;
$scope.session = $scope.work;
}
}
var timer;
var breakTimer;
$scope.startStop = function() {
if (!breaker) {
document.getElementById("sessionPlus").disabled = false;
document.getElementById("sessionMinus").disabled = false;
}
document.getElementById("breakPlus").disabled = false;
document.getElementById("breakMinus").disabled = false;
if (go) {
go = false;
if (breaker) {
breakTimer = setTimeout(startBreakTimer,1000);
breaker = false;
} else {
timer = setTimeout(startTimer,1000);
}
} else {
go = true;
clearTimeout(timer);
clearTimeout(breakTimer);
}
};
function startTimer(){
breaker = false;
if (primes >= 0) {
subtractDate();
if (primes == 0 && digits == 0) {
$scope.message = "Break";
$scope.$apply();
var audio = new Audio('http://www.oringz.com/oringz-uploads/sounds-729-i-demand-attention.mp3');
audio.play();
primes = $scope.break - 1;
digits = 60;
breakTimer = setTimeout(startBreakTimer,1000);
} else {
$scope.session = formatDate(primes);
$scope.$apply();
console.log($scope.session);
timer = setTimeout(startTimer,1000);
};
};
};
function startBreakTimer() {
breaker = true;
if (primes >= 0) {
subtractDate();
if (primes == 0 && digits == 0) {
$scope.message = "Work";
$scope.$apply();
var audio = new Audio('http://www.oringz.com/oringz-uploads/sounds-729-i-demand-attention.mp3');
audio.play();
primes = $scope.work - 1;
digits = 60;
timer = setTimeout(startTimer, 1000);
} else {
$scope.session = formatDate(primes);
$scope.$apply();
console.log($scope.break);
breakTimer = setTimeout(startBreakTimer,1000);
};
};
};
function subtractDate(someFunction){
document.getElementById("breakPlus").disabled = true;
document.getElementById("breakMinus").disabled = true;
document.getElementById("sessionPlus").disabled = true;
document.getElementById("sessionMinus").disabled = true;
if (digits > 0){
digits -= 1;
$scope.session = formatDate(primes);
$scope.$apply();
} else {
primes -= 1;
digits = 59;
$scope.session = formatDate(primes);
$scope.$apply();
};
};
function formatDate(value){
if (digits > 0) {
if (digits < 10) {
return value.toString() + ":0" + digits.toString();
} else {
return value.toString() + ":" + digits.toString();
}
} else {
return value.toString() + ":00";
}
};
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body {
background-color: grey;
}
h1 {
margin: 0 auto;
margin-top: 50px;
color: white;
width: 400px;
background-color: orange;
border-radius: 50px;
border: 5px solid white;
text-align: center;
}
.config ul {
display: inline;
}
.config li {
display: inline;
padding: 15px 15px 15px 15px;
border-radius: 100px;
border: 5px solid white;
background-color: orange;
color: white;
}
.config {
border-radius: 50%;
padding: 5px 5px 5px 5px;
display: block;
margin: 0 auto;
margin-top: 50px;
margin-left: -30px;
}
.config2 {
font-size: 40px;
display: block;
margin: 0 auto;
margin-top: 20px;
margin-bottom: -30px;
margin-left: -30px;
}
#break {
margin-left: -10px;
padding-right:120px;
}
#sessionTime {
margin: 0 auto;
margin-top: 50px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid white;
background-color: orange;
text-align: center;
color: white;
}
.config button {
border-radius: 100px;
background-color: white;
border: 2px solid white;
font-size: 16px;
outline: none;
color: black;
}
#sessionTime p {
padding-top: 50px;
margin-bottom: -20px;
font-size: 50px;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment