CatherineDesigner/index.html

## index.html
<!--https://codepen.io/freeCodeCamp/full/XpKrrW.-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Pomodoro Clock</title>
     <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
       <h1>Pomodoro Clock</h1>
    <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>

  </body>
</html>

## pomodoro-clock.markdown

      
    Raw
  

              pomodoro-clock.markdown
            
          
    Pomodoro Clock

A Pen by CatherineDesigner on CodePen.
License.

  
## script.js
$(document).ready(function(){

 var countTime = 25;
 var breakTime = 5;

 var pause = false;
 var seconds = 0;
 var minutes = 25;

 var counting;

 $('.timer').html(minutes + ":00");

 function countdown(){
    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);
      }
   }
  }


  $('#minusBreak').click(function(){
    if(pause === false){
    if(breakTime > 1){breakTime--; $("#break").html(breakTime); $('.title').text('Session'); $(".timer").html(countTime + ":00");

       seconds = 0;
       minutes = countTime;}
    }
  });
  $('#plusBreak').click(function(){
    if(pause === false){
    breakTime++; $("#break").html(breakTime);
    $('.title').text('Session');
    $(".timer").html(countTime + ":00");

       seconds = 0;
       minutes = countTime;
    }
  });
   $('#minusCount').click(function(){
     if(pause === false){
    if(countTime > 1){countTime--; $("#count").html(countTime); $(".timer").html(countTime + ":00");        $('.title').text('Session');
}

       seconds = 0;
       minutes = countTime;
     }
  });
  $('#plusCount').click(function(){
    if(pause === false){
    countTime++; $("#count").html(countTime);
      $(".timer").html(countTime + ":00");
      $('.title').text('Session');


      seconds = 0;
      minutes = countTime;
    }
  });

  $('.clock').click(function(){


   if(pause === false){
     counting = setInterval(countdown, 1000);
     pause = true;
   }
   else if(pause === true){
     clearInterval(counting);
     pause = false;
   }
  });
});

## style.css
body{
 background: linear-gradient(to right, #3333ff 0%, #0099ff 97%);
  text-align: center;
  margin: 0 auto;
  color: white;
}
h1{
  font-size: 40px;
}
.timers {
  display: inline-block;
  margin: 0px 20px;
}

.in{
  display: inline-block;
  margin: 5px;
}
button{
  color: white;
 background-color: black;
  border:0;
}
button:hover{
  cursor: pointer;
}
#break, #count, button{
  font-size: 40px;
}
.clock{
  height: 300px;
  width: 300px;
  margin: 20px auto;
  border: 2px solid black;
  box-shadow: 0 0 0px 3px white;
  border-radius: 60%;
  cursor: pointer;
}
.title, .timer{
  font-size: 50px;
  margin-top: 60px;
}
	<!--https://codepen.io/freeCodeCamp/full/XpKrrW.-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Pomodoro Clock</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="script.js"></script>
	</head>
	<body>
	<h1>Pomodoro Clock</h1>
	<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>

	</body>
	</html>
	$(document).ready(function(){

	var countTime = 25;
	var breakTime = 5;

	var pause = false;
	var seconds = 0;
	var minutes = 25;

	var counting;

	$('.timer').html(minutes + ":00");

	function countdown(){
	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);
	}
	}
	}


	$('#minusBreak').click(function(){
	if(pause === false){
	if(breakTime > 1){breakTime--; $("#break").html(breakTime); $('.title').text('Session'); $(".timer").html(countTime + ":00");

	seconds = 0;
	minutes = countTime;}
	}
	});
	$('#plusBreak').click(function(){
	if(pause === false){
	breakTime++; $("#break").html(breakTime);
	$('.title').text('Session');
	$(".timer").html(countTime + ":00");

	seconds = 0;
	minutes = countTime;
	}
	});
	$('#minusCount').click(function(){
	if(pause === false){
	if(countTime > 1){countTime--; $("#count").html(countTime); $(".timer").html(countTime + ":00"); $('.title').text('Session');
	}

	seconds = 0;
	minutes = countTime;
	}
	});
	$('#plusCount').click(function(){
	if(pause === false){
	countTime++; $("#count").html(countTime);
	$(".timer").html(countTime + ":00");
	$('.title').text('Session');


	seconds = 0;
	minutes = countTime;
	}
	});

	$('.clock').click(function(){


	if(pause === false){
	counting = setInterval(countdown, 1000);
	pause = true;
	}
	else if(pause === true){
	clearInterval(counting);
	pause = false;
	}
	});
	});
	body{
	background: linear-gradient(to right, #3333ff 0%, #0099ff 97%);
	text-align: center;
	margin: 0 auto;
	color: white;
	}
	h1{
	font-size: 40px;
	}
	.timers {
	display: inline-block;
	margin: 0px 20px;
	}

	.in{
	display: inline-block;
	margin: 5px;
	}
	button{
	color: white;
	background-color: black;
	border:0;
	}
	button:hover{
	cursor: pointer;
	}
	#break, #count, button{
	font-size: 40px;
	}
	.clock{
	height: 300px;
	width: 300px;
	margin: 20px auto;
	border: 2px solid black;
	box-shadow: 0 0 0px 3px white;
	border-radius: 60%;
	cursor: pointer;
	}
	.title, .timer{
	font-size: 50px;
	margin-top: 60px;
	}