Skip to content

Instantly share code, notes, and snippets.

@LibertysYarn

LibertysYarn/Pomodoro App.markdown

Last active November 15, 2015 02:57
Show Gist options
  • Save LibertysYarn/71152918731ee8abc17c to your computer and use it in GitHub Desktop.
Save LibertysYarn/71152918731ee8abc17c to your computer and use it in GitHub Desktop.
Download ZIP
Pomodoro App
Raw
index.html
<html lang="en">
<head>
<title>Pomodoro Timer</title>
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Raleway:100, 900|Oswald' rel='stylesheet' type='text/css'>
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<h1 class="text-vcenter">Pomodoro Timer</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<audio id="sound_tag" src="http://libertymontano.com/FCCfiles/gong-burmese.wav" preload="auto"></audio>
<div id="circle">
<div id="fill"></div>
<div id="bigbox">
<p>session</p>
<div class="timer">25:00</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2">
<div class="plus-container buttons">
<div class="plus-text">work session:
<div class="middle">
<button id="morePomo" class="break">+</button>
<button id="infoPomo" class="break button stop">25</button>
<button id="lessPomo" class="break">-</button>
<br>
<button class="play go">start</button>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="plus-container text3">
<div class="plus-text">
<div id="text-help">Welcome to the world's friendliest Pomo timer!</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="plus-container text4">
<div class="plus-text">
<div class="row">
<div class="col-xs-8 col-sm-6">Pomos<p id="pS" class="break">0</p></div>
<div class="col-xs-4 col-sm-6">Breaks<p id="bS" class="break">0</p></div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="plus-container buttons">
<div class="plus-text">break session:
<div class="middle">
<button id="more" class="break">+</button>
<button id="info" class="break button breakStop">5</button>
<button id="less" class="break">-</button>
<br>
<button class="breakPlay go">start</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
Pomodoro App.markdown
Raw
script.js
(function($) {
function sformat(s) {
var fm = [
Math.floor(s / 60) % 60,
s % 60
];
return $.map(fm, function(v, i) {
return ((v < 10) ? '0' : '') + v;
}).join(':');
}
$(function() {
var breakTimer;
var timer;
var nP = 25;
var nB = 5;
var red = '#522222';
var green = '#529052';
var pS = [];
var bS = [];
var $play = $('.play'),
$pause = $('.pause'),
$stop = $('.stop'),
$timer = $('.timer'),
$infoPomo = $('#infoPomo'),
$breakPlay = $('.breakPlay'),
$breakPause = $('.breakPause'),
$breakStop = $('.breakStop'),
$info = $('#info'),
$fill = $('#fill'),
$gong = $('#sound_tag'),
$circle = $('#circle'),
$textHelp = $('#text-help'),
$text3 = $('.text3'),
$pS = $('#pS'),
$bS = $('#bS'),
$text4 = $('.text4'),
$breakTimer = $('.timer');
var ideas = ['Take a break', 'Go for a walk', 'Walk the dog', 'Grab a snack', 'Meditate', 'Can haz kittens?', 'Write the next great American novel', 'Call Mom', 'Call Dad', 'Save the whales', 'Solve climate change', 'Walk the cat', 'Dance', 'Stretch', 'Sing a song', 'Take a selfie', 'Get a coffee', 'Drink some water', 'Tell someone you love them', 'Laugh maniacally', 'Instagram your lunch', 'Tweet your mood', "Journal your done its", 'Go outside'];
var encourage = ['Hang in there', 'You can do it', 'Power thru it', "Don't be a wuss", 'Suck it up', 'Just do it', "That's what she said", 'Only a million more', 'Back to work', "Quit yer' bitchin'", 'Code faster', "That's what he said", 'Stop slacking off', 'My Mom codes faster', 'WTF?!'];
$("#morePomo").click(function() {
nP += 1;
$("#infoPomo").text(nP);
});
$("#lessPomo").click(function() {
nP -= 1;
$("#infoPomo").text(nP);
});
$("#more").click(function() {
nB += 1;
$("#info").text(nB);
});
$("#less").click(function() {
nB -= 1;
$("#info").text(nB);
});
function toggle() {
if (timer.getStatus() == 'started') {
var bigbox = document.getElementById('bigbox');
bigbox.getElementsByTagName('P')[0].innerHTML = "Work Session";
$breakPlay.off('click');
var dTime = (nP * 60000);
$('#fill').animate({
height: '100%'
}, {
duration: dTime
});
$('#fill').css({
backgroundColor: green
});
} else if (breakTimer.getStatus() == 'started') {
var bigbox = document.getElementById('bigbox');
bigbox.getElementsByTagName('P')[0].innerHTML = "Break Session";
$play.off('click');
var dTime = (nB * 60000);
$('#fill').animate({
height: '100%'
}, {
duration: dTime
});
$('#fill').css({
backgroundColor: red
});
}
}
function resetHeight() {
$('#fill').animate({
height: '0%'
}, {
duration: 6000
});
}
function resetClocks() {
$('#circle').on('click', function() {
nP = 25;
nB = 5;
$("#info").text(5);
$("#infoPomo").text(25);
resetHeight();
})
}
function pSess() {
pS++;
$("#pS").text(pS);
console.log(pS);
setTimeout(
midnightTask,
moment("24:00:00", "hh:mm:ss").diff(moment(), 'seconds')
);
function midnightTask() {
pS = [];
}
}
function bSess() {
bS++;
$("#bS").text(bS);
console.log(bS);
setTimeout(
midnightTask,
moment("24:00:00", "hh:mm:ss").diff(moment(), 'seconds')
);
function midnightTask() {
bS = [];
}
}
function resetSess() {
var midnight = new Date();
midnight.setHours(24, 0, 0, 0);
}
var timer = new Timer({
onstart: function(sec) {
var sec = sformat(sec);
$timer.text(sec);
toggle();
resetHeight();
},
ontick: function(sec) {
var sec = sformat(sec);
$timer.text(sec);
},
onstop: function() {
resetClocks();
},
onend: function() {
$timer.text('Break!');
toggle();
$gong[0].play();
pSess();
$circle.effect( "shake", 6000 );
$breakPlay.on('click', function() {
breakTimer.start(nB * 60);
resetHeight();
});
}
});
$play.on('click', function() {
timer.start(nP * 60);
resetHeight();
});
$stop.on('click', function() {
if (/started|paused/.test(timer.getStatus())) {
timer.stop();
$fill.stop(true);
resetHeight();
}
});
var breakTimer = new Timer({
onstart: function(sec) {
var sec = sformat(sec);
$breakTimer.text(sec);
toggle();
resetHeight();
},
ontick: function(sec) {
var sec = sformat(sec);
$breakTimer.text(sec);
},
onstop: function() {
resetClocks();
},
onend: function() {
$timer.text('Work');
$gong[0].play();
$circle.effect( "shake", 6000 );
bSess();
toggle();
$play.on('click', function() {
timer.start(nP * 60);
resetHeight();
});
}
});
$breakPlay.on('click', function() {
/*breakTimer.start(nB * 60);
resetHeight();*/
});
$breakStop.on('click', function() {
if (/started|paused/.test(breakTimer.getStatus())) {
breakTimer.stop();
$fill.stop(true);
resetHeight();
}
});
$infoPomo.mouseover(function() {
$textHelp.text("Restart?");
});
$infoPomo.mouseout(function() {
$textHelp.text("");
});
$circle.mouseover(function() {
$textHelp.text("Reset timers?");
});
$circle.mouseout(function() {
$textHelp.text("");
});
$breakStop.mouseover(function() {
if (/started|paused/.test(timer.getStatus())) {
$textHelp.text(encourage[Math.round(Math.random() * (encourage.length - 1))] + ".");
} else {
$textHelp.text("Restart?");
}
});
$breakStop.mouseout(function() {
$textHelp.text("");
});
$breakPlay.mouseover(function() {
if (/started|paused/.test(timer.getStatus())) {
$textHelp.html("Only " + sformat(timer.getDuration()) + " more.\n" + encourage[Math.round(Math.random() * (encourage.length - 1))] + ".").replace(/\n/g, '<br/>');
} else if (pS == 0) {
$textHelp.html("Work first.\n Break...maybe.").replace(/\n/g, '<br/>');
} else if (/started|paused/.test(breakTimer.getStatus())) {
$textHelp.html("You could\n" + ideas[Math.round(Math.random() * (ideas.length - 1))] + ".").replace(/\n/g, '<br/>');
}
});
$breakPlay.mouseout(function() {
$textHelp.text("");
});
$play.mouseover(function() {
if (/started|paused/.test(breakTimer.getStatus())) {
$textHelp.text("Almost there...");
} else if (/started|paused/.test(timer.getStatus())) {
$textHelp.text("Only " + sformat(timer.getDuration()) + " more.");
} else {
$textHelp.text("Back to work?");
}
});
$play.mouseout(function() {
$textHelp.text("");
});
$text3.mouseover(function() {
$textHelp.html("Friendly words of encouragement here.");
});
$text3.mouseout(function() {
$textHelp.text("Hey there!");
});
$text4.mouseover(function() {
$textHelp.text("These reset on refresh");
});
$text4.mouseout(function() {
$textHelp.text("Hey there!");
});
});
}(jQuery));
//Google Fonts//
WebFontConfig = {
google: {
families: ['Raleway:100,900:latin', 'Oswald::Latin']
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://libertymontano.com/FCCfiles/js/timer/timer.js"></script>
<script src="http://libertymontano.com/FCCfiles/js/timer/timer.jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
Raw
style.css
a,
a:focus,
a:hover {
color: #fff;
text-decoration: none;
}
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
h1 {
text-align: center;
}
.text-vcenter {
margin-top: 25px;
padding: 0;
}
body,
h1,
.buttons .button,
.buttons .breakStop,
.button:hover,
.plus-text,
#bigbox,
.plus,
.break,
.timer {
font-family: 'Raleway', sans serif;
font-weight: 100;
}
h1,
.buttons .button,
.buttons .breakStop,
.plus,
.break {
font-size: 3em;
}
.site-wrapper {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
}
button {
border: #333;
}
.buttons .button,
.buttons .breakStop {
width: 60px;
height: 60px;
background: none;
border: none;
outline: none;
cursor: pointer;
margin: 5px 10px;
text-align: center;
color: inherit;
-moz-transition: color 400ms;
-o-transition: color 400ms;
-webkit-transition: color 400ms;
transition: color 400ms
}
button,
.plus-container,
#circle {
background: #333;
}
.button:hover {
color: #522222;
font-weight: 900;
}
.plus-container {
width: 200px;
height: 200px;
border-radius: 50%;
border: #FFF 1.5px solid;
margin-bottom: -10px;
display: flex;
justify-content: center;
align-items: center;
}
.plus-container:hover,
.break:hover,
.go {
background: #666;
}
.middle {
padding-top: 2px;
}
.plus-text {
font-size: 1em;
}
#bigbox {
font-size: 1.5em;
z-index: 2;
position: realtive;
}
.break,
.go,
.go:hover {
background: transparent;
}
.timer {
font-size: 4em;
position: realtive;
z-index: 99;
}
#circle {
margin: 0 auto;
text-align: center;
width: 300px;
height: 300px;
border: 2px solid #FFF;
border-radius: 50%;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
#circle:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
z-index: 2;
border: 4px solid #333;
}
#fill {
content: '';
z-index: -1;
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 0px;
}
.go {
height: 20px;
}
.go:hover {
color: #5AD654;
font-family: 'Oswald', sans-serif;
font-size: 2em;
text-transform: uppercase;
height: 40px;
border: 1px #FFF solid;
border-radius: 25%;
}
#text-help {
font-size: 1.8em;
font-family: 'Oswald', sans serif;
}
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