Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CodePen Home Build a Pomodoro Clock (FreeCodeCamp)
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<audio>
<source src="http://www.myinstants.com/media/sounds/alert-hq.mp3"></source>
</audio>
</head>
<body>
<h1>FreeCodeCamp</h1>
<h3>Pomodoro Clock</h3>
<div class='timers'>
<div class='break'>
<p>Break Length</p>
<div>
<button class='in' id='minusBreak'>-</button>
<p class='in' id='break'>5</p>
<button class='in' id='plusBreak'>+</button>
</div>
</div>
<div class='session'>
<p>Session Length</p>
<div>
<button class='in' id='minusCount'>-</button>
<p class='in' id='count'> 25 </p>
<button class='in' id='plusCount'>+</button>
</div>
</div>
</div>
<div class='clock' id='grad'>
<p class='title'>Session</p>
<p class='timer'>25</p>
</div>
<p>To start the countdown click the clock!</p>
<p>Pause and unpause by tapping the clock!</p>
<p>To reset the clock, choose your new times when the clock is paused and then click the clock!</p>
</body>
</html>
$(document).ready(function(){
var audio = $("audio")[0];
var countTime = 25;
var breakTime = 5;
//use this to see if we can change times on pause
var pause = false;
var seconds = 0;
var minutes = 25;
//global interval variable
var counting;
$('.timer').html(minutes + ":00");
function countdown(){
if(minutes === 0 && seconds === 1){
//play the sound on both
audio.play();
}
if(minutes === 0 && seconds === 0){
if($('.title').text() === 'Session'){
$('.title').text('Break');
minutes = breakTime;
$('.timer').html(minutes + ":0" + seconds);
}
else if($('.title').text() === 'Break'){
$('.title').text('Session');
minutes = countTime;
$('.timer').html(minutes + ":0" + seconds);
}
}
else{
if(seconds === 0){seconds = 60; minutes--}
seconds--;
if(seconds < 10){$('.timer').html(minutes + ":0" + seconds);}
else{
$('.timer').html(minutes + ":" + seconds);
}
}
}
//for all, if we are paused, change our timer displays and reset text so clock is completely reset
$('#minusBreak').click(function(){
if(pause === false){
if(breakTime > 1){breakTime--; $("#break").html(breakTime); $('.title').text('Session'); $(".timer").html(countTime + ":00");
//reset times
seconds = 0;
minutes = countTime;}
}
});
$('#plusBreak').click(function(){
if(pause === false){
breakTime++; $("#break").html(breakTime);
$('.title').text('Session');
$(".timer").html(countTime + ":00");
//reset times
seconds = 0;
minutes = countTime;
}
});
$('#minusCount').click(function(){
if(pause === false){
if(countTime > 1){countTime--; $("#count").html(countTime); $(".timer").html(countTime + ":00"); $('.title').text('Session');
}
//reset times
seconds = 0;
minutes = countTime;
}
});
$('#plusCount').click(function(){
if(pause === false){
countTime++; $("#count").html(countTime);
$(".timer").html(countTime + ":00");
$('.title').text('Session');
//reset times
seconds = 0;
minutes = countTime;
}
});
$('.clock').click(function(){
//begin countdown function, call it every sec
if(pause === false){
counting = setInterval(countdown, 1000);
pause = true;
}
else if(pause === true){
clearInterval(counting);
pause = false;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
body{
text-align: center;
margin: 0 auto;
font-family: Montserrat;
background-color: #22262B;
color: white;
}
.clock{
height: 300px;
width: 300px;
margin: 20px auto;
border: 2px solid #22262B;
box-shadow: 0 0 0px 2px SkyBlue;
border-radius: 100%;
cursor: pointer;
}
#grad {
background: -webkit-gradient(linear, top, bottom, color-stop(100%,#22262B), color-stop(40%,#00F));
background: -moz-linear-gradient(top center, #22262B 100%, #00F 40%);
background: -o-linear-gradient(top, #22262B 100%, #00F 40%);
background: linear-gradient(to bottom, #22262B 100%, #00F 0%);
}
h1{
font-size: 60px;
font-family: Pacifico;
}
h3{
font-size: 40px;
}
.timers div{
display: inline-block;
margin: 0px 20px;
}
.in{
display: inline-block;
margin: 5px;
}
button{
color: white;
background-color: #22262B;
border:0;
outline: 0;
}
button:hover{
cursor: pointer;
}
#break, #count, button{
font-size: 40px;
}
.title, .timer{
font-size: 50px;
margin-top: 60px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment