How pause/resume pomodoro clock?

JavaScript
1

I don’t understand how to pause the clock. I think I have the basic premise right, but it’s not working. I’ve tried putting the pause function both inside and outside of the time function, with no change.

Code so far:

  var work = parseInt($("#wtime").html());
  var brk = parseInt($("#btime").html());
  var disp = parseInt($("#display").html());
  var sound = $("#sound")[0];
  var counting = 0;
  $("#reset").hide();
  
  $("#wdec").click(function(){
    if (work >= 1){
    work -= 1;
    }
    $("#wtime").html(work + ":00");
    $("#display").html(work + ":00");
  });  
  
  $("#winc").click(function(){
    if (work <= 55){
    work += 5;
    }
    $("#wtime").html(work + ":00");
    $("#display").html(work + ":00");
  });
  
    $("#bdec").click(function(){
    if (brk >= 1){
    brk -= 1;
    }  
    $("#btime").html(brk + ":00");
  });

  $("#binc").click(function(){
    if (brk <= 25){
    brk += 5;
    }
    $("#btime").html(brk + ":00");
  });

  $("#start").click(function(){
  var countdown = setInterval(time, 1000);
  var breaktime;
  work *= 60;
  brk *= 60;
  function time(){
    work -= 1;
    if (work === 0){
      clearInterval(countdown);
      sound.play();
      breaktime = setInterval(brktime, 1000);
    }
    if (work%60 >= 10){
      $("#display").html(Math.floor(work/60) + ":" + (work%60));
    } else {
      $("#display").html(Math.floor(work/60) + ":0" + (work%60));
    }
    $("#start").hide();
  function brktime(){
    brk -= 1;
    if (brk === 0){
      clearInterval(breaktime);
      sound.play();
      $("#start").hide();
      $("#reset").show();
    }
    if (brk%60 >= 10){
      $("#display").html(Math.floor(brk/60) + ":" + (brk%60));
    } else {
      $("#display").html(Math.floor(brk/60) + ":0" + (brk%60));
    }
   }//end of brktime
  
  }//end of time
 $("#pause").click(function(){
     if (counting == 0){  
        counting == countdown;
     } else {
       clearInterval(counting);
       counting = 0;
     }
  });
  });//end of start
  
  $("#reset").click(function(){
    work=5;
    brk=5;
    disp=5;
    $("#wtime").html(work + ":00");
    $("#btime").html(brk + ":00");
    $("#display").html(disp + ":00");
    $("#reset").hide();
    $("#start").show();
  });
});//end of doc ready
3

Sure. It is:

https://codepen.io/velvetstar/pen/EwNENj

5

I made my function time and function brktime separate from each other, but when I tried to make both functions stand alone outside of the start function, weird things happened on my timer. So I decided to leave them under the start function.

I was able to successfully pause my timer with this code:
First, I created a global variable: var paused = true;
Then I set my countdown variable to 0: var countdown = 0; and under my time function, removed the keyword var and set countdown = setInterval(time, 1000);
Last, I wrote this code for the pause function:

$("#pause").click(function(){
    if (paused && countdown !== 0){
      clearInterval(countdown);
      }
  });

Now I am having trouble resuming my timer.
I tried creating a global variable: var currentTime; and then setting that to the value on the timer’s display: disp, but that didn’t work.
I tried this code unsuccessfully:

$("#pause").click(function(){
    if (paused && countdown !== 0){
      clearInterval(countdown);
      currentTime = disp;
    } else if (paused && !countdown){
      clearInterval(currentTime);
    }
  });

What am I doing wrong?
Thanks!

6

I have changed my code. I am so close. Just needs a bit of tweaking, but I’m not sure where.

My start function is now independent from my time function and brktime function.

This is my new jquery code:

$("#pause").click(function(){
    if (paused && countdown !== 0){
      clearInterval(countdown);
      paused = false;
    } else if (!paused){
      setInterval(time, 1000);
    }
  });

I can click on the pause button once to pause it, and once again to resume it. But if I click on the pause button a third time, it starts counting down really fast and when it gets to break time, it displays this:

-1:0-1
-1:0-2
-1:0-3
-1:0-4

and on and on. It should display:

0:59
0:58
0:57
0:56

etc.

Suggestions?