PappuKP/codepen-home-build-a-pomodoro-clock-freecodecamp.markdown

## codepen-home-build-a-pomodoro-clock-freecodecamp.markdown

      
    Raw
  

              codepen-home-build-a-pomodoro-clock-freecodecamp.markdown
            
          
    CodePen Home Build a Pomodoro Clock (FreeCodeCamp)

A Pen by Pappu Kumar Pashi on CodePen.
License.

  
## index.html
<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>

## script.babel
$(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;
   }
  });
});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.css
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;
}
	<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;
	}
	});
	});
	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;
	}