Skip to content

Instantly share code, notes, and snippets.

@akgold

akgold/Pomodoro Clock.markdown

Created August 28, 2015 16:28
Show Gist options
  • Save akgold/5796885cfd9cf9c497ea to your computer and use it in GitHub Desktop.
Save akgold/5796885cfd9cf9c497ea to your computer and use it in GitHub Desktop.
Download ZIP
Pomodoro Clock
Raw
index.html
<html>
<body>
<h1 class = "text-center">Work Clock</h1>
<br/><br/>
<div class = "timer">
<p id = "timeHead"></p>
<div id = "timeLeft"></div>
</div>
</br>
<button id='reset'> Reset</button>
</body>
</html>
Raw
script.js
$(document).ready(function(){
$('#timeLeft').text('25:00');
var counting = false;
var time;
$('#timeHead').text("Work!");
$('.timer').click(function(){
if (!counting){
time = window.setInterval(updateTimer,100);
counting = true;
}
else{
clearInterval(time);
counting = false;
}
});
function updateTimer(){
var timeLeft = $('#timeLeft').text()
var timeLeft = parseInt(timeLeft.match(/(\d+):/)[1],10)*60 +
parseInt(timeLeft.match(/:(\d+)/)[1],10)
timeLeft -=1;
var minLeft = Math.floor(timeLeft/60);
var secLeft = timeLeft- minLeft*60;
if (secLeft >=10){
timeLeft = minLeft+":"+secLeft;
}
else{
timeLeft = minLeft+":0"+secLeft;
}
if(timeLeft == "0:00" && $('#timeHead').text() == "Work!"){
timeLeft = "5:00";
$('.timer').toggleClass('timeUp');
$('#timeHead').text("Rest!")
}
$('#timeLeft').text(timeLeft);
};
$('#reset').click(function(){
$('#timeHead').text("Work!");
$('#timeLeft').text("0:10");
$('.timer').removeClass('timeUp');
clearInterval(time);
})
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body {
background-color: #777;
text-align: center;
font-family: 'Patua One', cursive;
}
h1 {
font-family: 'Patua One', cursive;
color: #DCA70A;
text-shadow: 2px 1px black;
font-size: 4em;
}
.timer {
cursor: pointer;
height: 300px;
width: 300px;
border: 5px solid;
border-color: #DCA70A;
border-radius: 50%;
font-size: 3em;
margin-left: auto;
margin-right: auto;
vertical-align:middle;
padding-top: 5%;
}
.timeUp{
background-color:#333 !important;
color: #DCA70A !important;
}
#reset{
background-color: #DCA70A;
border: 1px black;
border-radius: 5px;
font-size: 2em;
}
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