Skip to content

Instantly share code, notes, and snippets.

@mikehow1984

mikehow1984/Mike's Pomodoro Timer.markdown

Created November 30, 2015 01:48
Show Gist options
  • Save mikehow1984/e0ebdc51565da53212fc to your computer and use it in GitHub Desktop.
Save mikehow1984/e0ebdc51565da53212fc to your computer and use it in GitHub Desktop.
Download ZIP
Mike's Pomodoro Timer
Raw
index.html
<head><link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500italic' rel='stylesheet' type='text/css'></head>
<body>
<header>Mike's Pomodoro Timer</header>
<div id="main-count" class="timer-controls">
<div id="main-text">Main Timer</div>
<div id="main-minus" class="increment" onclick="lessTime('main-min')">-</div>
<div id="main-min" class="timer-set">25</div>
<div id="main-plus" class="increment" onclick="moreTime('main-min')">+</div>
</div>
<div id="break-count" class="timer-controls">
<div id="break-text">Break Timer</div>
<div id="break-minus" class="increment" onclick="lessTime('break-min')">-</div>
<div id="break-min" class="timer-set">5</div>
<div id="break-plus" class="increment" onclick="moreTime('break-min')">+</div>
</div>
<div id="timer" onclick="initTimer()">
<div id="timer-label">Main</div>
<div id="Hrs" class="digits"></div>
<div id="Mins" class="digits">25</div>
<div id="Secs" class="digits"></div>
</div>
<div id="test"></div>
<div id="test2"></div>
</body>
Raw
script.js
var isMainTimer = true;
var timerIsntChanged = true;
var go = true;
var pausable = false;
var paused = false;
var globalTimeLeft = 0;
var looped = false;
var THEEND = 0;
var MAX = 0;
function lessTime(id) { //subtracts time
if ((paused && pausable) || (!paused && !pausable)) {
document.getElementById("timer").style.backgroundSize = "0% 100%";
timerIsntChanged = false;
go = true;
pausable = false;
paused = false;
looped = false;
var time = parseInt(document.getElementById(id).innerHTML);
if (time > 1) {
document.getElementById(id).innerHTML = time - 1;
document.getElementById("Mins").innerHTML = time - 1;
document.getElementById("Hrs").innerHTML = "";
document.getElementById("Secs").innerHTML = "";
}
if (id == "break-min") {
isMainTimer = false;
document.getElementById("timer-label").innerHTML = "Break";
}
if (id == "main-min") {
isMainTimer = true;
document.getElementById("timer-label").innerHTML = "Main";
}
}
}
function moreTime(id) { //adds time
if ((paused && pausable) || (!paused && !pausable)) {
document.getElementById("timer").style.backgroundSize = "0% 100%";
timerIsntChanged = false;
go = true;
pausable = false;
paused = false;
looped = false;
var time = parseInt(document.getElementById(id).innerHTML);
document.getElementById(id).innerHTML = time + 1;
document.getElementById("Mins").innerHTML = time + 1;
document.getElementById("Hrs").innerHTML = "";
document.getElementById("Secs").innerHTML = "";
if (id == "break-min") {
isMainTimer = false;
document.getElementById("timer-label").innerHTML = "Break";
}
if (id == "main-min") {
isMainTimer = true;
document.getElementById("timer-label").innerHTML = "Main";
}
}
}
function timeRemaining(endTime) { //calculates time remaining
var timeLeft = endTime - Date.parse(new Date());
globalTimeLeft = timeLeft;
var hrs = Math.floor((timeLeft / (60 * 60 * 1000)));
var mins = Math.floor((timeLeft / (60 * 1000)) % 60);
var secs = Math.floor((timeLeft / 1000) % 60);
return {
's': secs,
'm': mins,
'h': hrs,
'total': timeLeft
};
}
function percentage(current) {
var invTimeLeft = MAX - current;
var progress = (invTimeLeft * 100) / MAX;
//document.getElementById("test2").innerHTML = progress;
return progress;
}
function initTimer() {
/*document.getElementById("test").innerHTML = "pausable: " + pausable + "<br>" +
"paused: " + paused + "<br>" +
"go: " + go + "<br>" +
"globalTimeLeft: " + globalTimeLeft;*/
//initial setup
timerIsntChanged = true;
var hrsTimer = document.getElementById("Hrs");
var minTimer = document.getElementById("Mins");
var secTimer = document.getElementById("Secs");
if (!pausable) {
if (looped) {
if (isMainTimer) {
var minutes = document.getElementById("main-min").innerHTML;
} else {
var minutes = document.getElementById("break-min").innerHTML;
}
} else {
var minutes = parseInt(minTimer.innerHTML);
}
var hours = parseInt(hrsTimer.innerHTML);
var seconds = parseInt(secTimer.innerHTML);
if (!hrsTimer.value) {
hours = 0;
}
if (!secTimer.value) {
seconds = 0;
}
var totalTime = (hours * 60 * 60 * 1000) + (minutes * 60 * 1000) + (seconds * 1000);
MAX = totalTime;
THEEND = totalTime + Date.parse(new Date());
globalTimeLeft = totalTime;
} else {
if (!paused) {
paused = true;
} else {
THEEND = globalTimeLeft + Date.parse(new Date());
paused = false;
}
}
//timing loop
go = true;
pausable = true;
var timerInterval = setInterval(function() {
if (!timerIsntChanged) {
go = false;
endlessTiming = false;
clearInterval(timerInterval);
}
if (paused) {
go = false;
endlessTiming = false;
clearInterval(timerInterval);
}
if (!go) return;
var t = timeRemaining(THEEND);
globalTimeLeft = t.total;
var percentDone = percentage(t.total);
document.getElementById("timer").style.backgroundSize = percentDone + "% 100%";
//document.getElementById("timer-progress-bar").setAttribute("aria-valuenow", "percentage(t.total)");
if (t.h > 0) {
hrsTimer.innerHTML = t.h + ":";
}
minTimer.innerHTML = ("0" + t.m).slice(-2) + ":";
secTimer.innerHTML = ("0" + t.s).slice(-2);
if (t.total <= 0) { //end of timer
pausable = false;
var audio = new Audio('http://aintuanengineer.com/audio/notification.mp3');
audio.play();
$('#Hrs').empty();
$('#Min').empty();
$('#Sec').empty();
//switch to other timer after timer is done
if (isMainTimer == true) {
minTimer.innerHTML = document.getElementById("break-min").innerHTML + ":";
document.getElementById("timer-label").innerHTML = "Break";
isMainTimer = false;
} else {
minTimer.innerHTML = document.getElementById("main-min").innerHTML + ":";
document.getElementById("timer-label").innerHTML = "Main";
isMainTimer = true;
}
looped = true;
clearInterval(timerInterval);
initTimer();
}
}, 1000);
}
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
header{
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: bold;
font-size: 40px;
text-align: center;
}
.increment{
border: solid 1px;
border-radius: 10px;
width: 20px;
text-align: center;
display: inline-block;
}
.timer-set{
display: inline-block;
padding: 20px;
font-size: 20px;
}
#timer{
width: 70%;
margin: auto;
font-size: 36px;
border: solid;
border-radius: 5px;
padding: 20px;
text-align: center;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-image: url("http://aintuanengineer.com/img/cyan.jpg");
background-size: 0% 100%;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: bold;
}
.progress{
height: auto;
}
.digits{
display: inline-block;
}
.timer-controls{
display:inline-block;
width: 49%;
text-align: center;
font-weight: bold;
font-family: Verdana,
}
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