Pomodoro Clock v3.5

index.html

<h1 id="header">Pomodoro Clock</h1>
<h3 id = "fcc">FreeCodeCamp</h3>

<div class = "row all">


  <div id = "Toggle">
<p id = "session">Session</p>
    
    <div class="row Tog">
<div class = "row" id = "session1">
      <button class = "btn btn-info" id="session-minus">-</button>
<p class = "nos" id = "sessionTime">25</p>
    <button class = "btn btn-info" id = "session-plus">+</button>
    </div>
</div>
  </div><!--ends sesion toggle-->

  
<div class = "info">
  <button class = "btn btn-primary" id="button1">Start/Stop</button>
  <button class = "btn btn-danger" id="button2">Reset</button>
  <p id="time">Time</p>
  <p id = "status">Status</p>
  </div>
  
<div id = "Toggle">
<p id = "rest">Break</p>
    
    <div class="row Tog">
<div class = "row" id = "rest1">
      <button class = "btn btn-info" id="rest-minus">-</button>
<p class = "nos" id = "restTime">5</p>
    <button class = "btn btn-info" id = "rest-plus">+</button>
    </div>
</div>
  </div><!--ends rest toggle-->
  
  <div>

pomodoro-clock-v3-5.markdown

Pomodoro Clock v3.5

v3 stop clock at 0:00 and move to break clock v3.1 gone back v3.2 - nope that didnt go well - reorganising everything v3.3 - working pomodoro v3.4 - desperately trying to sort css on a working pomodoro v3,5 I've given in with css

A Pen by Stephen Roberts on CodePen.

License.

script.js

$(document).ready(function(){
  var toggle = "";
  var timerId = "";
  var now = "";
  var endTime = "";
  var time = "";
  var paused = "";
  
  var type = 1; //1 for session, 0 for break;

  
  var session = 25;
  var rest = 5;
  
  
    function timeSwitch(data){
    var mins = parseInt(data/(1000*60));
    var secs = parseInt((data - (mins*1000*60))/1000);
    if(secs<10){
      secs = "0"+secs;}
    else {secs;};
      if(mins<10){
        mins = "0"+mins;}
      else{mins;};
      
    
    return(mins +"m : "+secs+"s");
  }; //ends timeSwtich function

  $("#time").html(timeSwitch(session*60*1000));
  $("#status").html("Session");
  
    //toggle session time:
  $("#session-plus").click(function(){
    if(toggle == "on"){} else{
    session = Math.min(session+1,60);
    $("#sessionTime").html(session);

    $("#time").html(timeSwitch(session*60*1000));
      toggle = "";
    }
  }); //ends session plus button
  
  $("#session-minus").click(function(){
    if(toggle =="on"){} else{
    session = Math.max(session-1,0);
    $("#sessionTime").html(session);
    $("#time").html(timeSwitch(session*60*1000));
      toggle = "";
    }
    }); //ends session minus button
  
  //toggle break time:
  $("#rest-plus").click(function(){
    if(toggle == "on"){} else{
    rest = Math.min(rest+1,60);
    $("#restTime").html(rest);
    };
  }); //ends break plus button
  
  $("#rest-minus").click(function(){
    if(toggle=="on"){}else{
    rest = Math.max(rest-1,0);
    $("#restTime").html(rest);
    };
  }); //ends break minus button
  

function startTimer(end, start){
 timerId = setInterval(function(){
   if((end-start)<=0){
     if(type==1){type=0;
            $("#status").html("Break");}
     else{type=1;
         $("#status").html("Session");};
     //ends if statement for changing type
     start = new Date().getTime();
    end = start+(type*session+(1-type)*rest)*60*1000;
     endTime = end;
   } else { //ends if statement for time elapsed
    if(type==1){$("#status").html("Session");} else {$("#status").html("Break");};
     start = new Date().getTime();
     $("#time").html(timeSwitch(end-start));}
 },100); //ends set Interval
}; //ends startTimer function
  


  
  $("#button1").click(function(){
        if(toggle == ""){

// timer turned on for first time
     toggle = "on";
     time = new Date().getTime();
     endTime = time+(((session*type+rest*(1-type)))*60*1000);
     startTimer(endTime, time);
} //ends first if portion for starting timer on toggle ""

else if(toggle == "on")
      {toggle = "off";
      now = new Date().getTime();
      paused = endTime - now;
      $("#time").html(timeSwitch(paused));
      clearInterval(timerId);
       //ends else if for toggle on portion
      }
else {
  toggle = "on";
      
      time = new Date().getTime();
      endTime = time + paused;  
      startTimer(endTime, time);
        
}; //ends toggle instruction
  
  }); //ends button1 click  
  
  $("#button2").click(function(){
    clearInterval(timerId);
    toggle = "";
    $("#time").html(timeSwitch(session*60*1000));
  });
  
}); //ends get ready

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.css

body{
  background-color: rgba(17,43,100,0.8);
  color: white;
  text-align: center;
  font-family: helvetica;
}
.all{margin: 3em 0em 0em 0em;}

h1{margin: 1em 0em}

.info{
width: 33%;
}

#Toggle{
width: 33%;
}
.Tog{
margin: 0 auto;
width: 50%;
;}

#session1{margin : auto;}
#rest1{margin: auto;}

.nos{padding: 0.2em;}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />