Skip to content

Instantly share code, notes, and snippets.

@ZebGirouard

ZebGirouard/WQGbRr.markdown

Created September 23, 2015 02:28
Show Gist options
  • Save ZebGirouard/37a50f070e35f691aad1 to your computer and use it in GitHub Desktop.
Save ZebGirouard/37a50f070e35f691aad1 to your computer and use it in GitHub Desktop.
Download ZIP
WQGbRr
Raw
index.html
<body style='background-color: black'>
<div class='text-center'>
<h1>Pomodoro FTW!</h1>
<div id = 'timer-entry'>
<h2>Work Time</h2>
<input type="text" id='#workEntry' placeholder='25'></input>
<h2>Break Time</h2>
<input type="text" id='#breakEntry' placeholder='5'></input>
</br>
<button class='btn btn-primary' id='start-button'>Start</button>
</div>
<div id="timer">
<h2 id='timerHeader'</h2>
<h1 id='timerClock'></h1>
</div>
</div>
<audio id="startBreak">
<source src="http://cwealthcraft.com/Computer_Magic.wav"></source>
Update your browser to enjoy HTML5 audio!
</audio>
<audio id="startWork">
<source src="http://cwealthcraft.com/Ting.wav"></source>
Update your browser to enjoy HTML5 audio!
</audio>
</body>
Raw
script.js
$(document).ready(function() {
var startSound = {};
startSound.Work = $('#startWork')[0];
startSound.Break = $('#startBreak')[0];
function myTimer(timerTotal, timeAtStart) {
var currentTime = new Date() / 1000;
var timeRemaining = Math.ceil((timeAtStart - currentTime) + timerTotal);
var seconds = timeRemaining % 60;
var secondsRemaining = (seconds < 10) ? ("0" + seconds) : seconds;
var minutesRemaining = Math.floor(timeRemaining / 60);
$("#timerClock").text(minutesRemaining+" : " + secondsRemaining);
}
var startTimer = function(breakWork,times) {
timePeriod = times[breakWork];
$("#timerHeader").text(breakWork + " Time");
$('#timer-entry').hide();
$('#timer').show();
startSound[breakWork].play();
var timeAtStart = new Date() / 1000;
var count = 1;
var i = setInterval(function() {
myTimer(timePeriod, timeAtStart);
if(count >= timePeriod) {
clearInterval(i);
//Start Break after Work Timer Ends
if(breakWork === "Work") {
startTimer("Break", times);
}
else {
startSound.Work.play();
$('#timer').hide();
$('#timer-entry').show();
}
}
count++;
}, 1000);
}
$('#start-button').click(function() {
var times = {};
times.Work = (document.getElementById('#workEntry').value || 25) * 60;
times.Break = (document.getElementById('#breakEntry').value || 5) * 60;
startTimer("Work", times);
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
.text-center {
font-family: 'Lucida Bright', Georgia, serif;
color: rgb(200,200,200);
}
h1 {
font-size: 72px;
}
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