Pomodoro Clock_Adding in a click counter_Help requested

Hello. I’m trying to add in a click counter. So far it doesn’t seem to be working. Any ideas?

Thanks!

Can you provide more information? What element must be clicked to increment the counter? Is the counter supposed to be displayed somewhere?

If possible I would like feedback on how I’ve organized my code. Am I headed in the right direction with it?

Right now, I don’t know how to increment the number of minutes with the button marked ‘plus’. I’m trying to create a click handler:

$('#plus').on('click', function(){
    timeLeft += 60;
  });

which will increment timeLeft by 60 seconds each time it is clicked on.

var timeLeft = 25*60;

This approach doesn’t seem to be working…

Sorry for the late response. Been busy today.

By itself, your code is just incrementing timeLeft when the + button is clicked, but you also need to update the DOM using the p5 select syntax.

$("#plus").on("click", function() {
  timeLeft += 60;
  var timer = select("#timer");
  timer.html(convertSeconds(timeLeft - counter));
});

I would suggest creating separate function just for the bottom two lines of code above, because they will be used more than once in your project.

1 Like

When I tried creating a separate function for the bottom two lines of code, the timer wouldn’t start, so I’ve decided to leave it as is. Maybe I was doing something wrong?

The timer runs silently in the background when it hits zero. Do you know what command I can give it to stop it from running and to restart it?

You just needed to reorganize your code. See the following reorganization of your code. I moved all the variable declarations to the top of their relative scopes to make the code easier to read. I created a function named displayConvertedTime which actually only used one line to replace timer.html(convertSeconds(timeLeft - counter)); where it was referenced multiple times in the code.

One simplification I made to your code was getting creating a single callback function for the + and - buttons.

var counter = 0;
var timeLeft = 25 * 60;

function convertSeconds(s) {
  if (s >= 0) {
    if (s >= 3600) {
      var hours = floor(s / 3600);
      if (s % 3600 >= 60) {
        var minutes = floor((s % 3600) / 60);
        var seconds = (s % 3600) % 60;
      }
      else {
        var minutes = floor((s % 3600) / 60);
        seconds = (s % 3600) % 60;
      }
    }
    else {
      hours = 00;
      minutes = floor(s / 60);
      seconds = s % 60;
    }
  }
  else if (s > 0) { // this else if condition will never evaluation, because the original if already checks if s >= 0
    $("#timer").display("00:00:00"); // display is not a valid jQuery method, so you will need to change this
    alert("Time is up!");
  }
  return nf(hours, 2) + ":" + nf(minutes, 2) + ":" + nf(seconds, 2);
}

function setup() {
  var time;
  var timer = select("#timer"); //access a p5 element on page
  
  function displayConvertedTime() {
    timer.html(convertSeconds(timeLeft - counter));
  }
  
  function timeIt() {
    counter++;
    displayConvertedTime();
  }
 
  $("#plus, #minus").on("click", function() {
    timeLeft += this.id === 'plus' ? 60 : -60;
    displayConvertedTime();
  });
  
  //wants a certain event to happen every 1000 ms
  $("#start").on("click", function() {
    time = setInterval(timeIt, 1000);
  });

  $("#pause").on("click", function() {
    clearInterval(time);
  });

  $("#reset").on("click", function() {
    clearInterval(time);
    counter = 0;
    timeLeft = 25 * 60;
    displayConvertedTime();
  });  

  noCanvas(); //Get rid of p5 canvas
  displayConvertedTime();
}

You already know how to clear the interval, because you have the code in your reset button. The issue is you have no code in place to recognize when the timer is complete (seconds = 0). See my comments in the above code concerning your else if statement. When you get the correct else if, you could clear the interval there.

1 Like

Thank you so much. I am now trying to figure out how to get my timer to restart AND not get all wonky if the start button is clicked on a few times.

If I use:
$(’#start’).on(‘click’, function() {
time = setInterval(timeIt, 1000);
})
I can stop and restart the timer. Problem: the intervals become uneven if I double-click the start button
If I use:
$(’#start’).on(‘click’, function() {
if(!time) {
time = setInterval(timeIt, 1000);
}
instead, the problem is resolved; however, the timer can’t be restarted. Would you happen to know how I can fix this? Thanks!

One thing you need to fix first is clear the interval once s < 0. However, to do this successfully, you will either have to either:

a) declare time in the global scope and remove the var time = setInterval(timeIt, 200); in the callback function of the Start/Resume click handler
OR
b) move any code currently outside of the setup function to be inside it, so the convertSeconds would have access to the value of time interval setup within the setup function.

The, let’s say you set your timer for 5 minutes and click the Start/Resume button one time. The time counts down 0:00:00 and stops. If you click the Start/Resume button again with the timer showing 0:00:00, why would you expect it to start again. It should only start again, once you have set a time using the + or - button or click the Reset button. Basically, you only want the timer to start in general if timeLeft is > 0, so why not change the following if condition to timeLeft > 0?

  $('#start').on('click', function() {
    if(!time) {
        time = setInterval(timeIt, 200);
    }
  });

Thanks again!

Do I need to add in a ‘break’ timer for this project, or is it optional?

The whole idea of Pomodoro clock is that there is a break and a session. So, you you need both.