Need help with setting start button after stopping it

Need help with setting start button after stopping it
0.0 0

#1

hideHello I’m working on pomodoro clock project CodPen
Now I’m trying to set Start Break (start-break) button which response for the starting Break session when it stopped but can’t catch how to run it again correctly

here is my code
I marked the part of code with //++++++++++++ comment when I’m trying to solve question
maybe somebody helps?

<p>
  $(document).ready(function() {
  let beep = $("#beep")[0]; //audio signal
  let breakCount = parseInt($("#break-length").html());
  let sessionCount = parseInt($("#session-length").html());
  let breakInterval;

  $("#start-break").hide();
  $("#stop-break").hide();
  $("#stop-session").hide();
  $("#break-container").hide();

  //-----------start_stop------------start
  $("#start_stop").click(function() {
    $("#start_stop").hide();
    $("#stop-session").show();

    let sessionInterval = setInterval(sessionTimer, 1000);

    //===================================start
    function sessionTimer() {
      sessionCount -= 1;
      if (sessionCount === 0) {
        clearInterval(sessionInterval);
        beep.play();
        breakInterval = setInterval(breakTimer, 1000);
      }
      $("#time-left").html(sessionCount);
      $("#stop-session").click(function() {
        clearInterval(sessionInterval);
        $("#start_stop").show();
        $("#stop-session").hide();
      });
    }
    //=================================== end

    //=================================== start
    function breakTimer() {
      $("#break-container").show();
      $("#session-container").hide();
      $("#stop-session").hide();
      $("#stop-break").show();

      breakCount -= 1;
      if (breakCount <= 0) {
        clearInterval(breakInterval);
      }
      $("#break-left").html(breakCount);
      $("#stop-break").click(function() {
        $("#start-break").show();
        $("#stop-break").hide();
        clearInterval(breakInterval);
      });
    }
    //==========================================end
  });
  //-----------------start_stop----------------------end
  
//++++++++++++++++++++++here is my  trying to set 'start-break' button
  $('start-break').click(function(){//click start break b
    $('#star-break').hide();
    $('#stop-brek').show();
    clearInteval(breakInterval);
   //+++++++++++++++++++++++++++++

  });
  //**************Decrement Increment functions*********************
  //break decrementing
  $("#break-decrement").click(function() {
    if (breakCount > 1) {
      breakCount -= 1;
      $("#break-length").html(breakCount);
    }
  });
  //break decremneting---------------------

  //break increment
  $("#break-increment").click(function() {
    breakCount += 1;
    $("#break-length").html(breakCount);
  });
  //---------------------

  //session decrement
  $("#session-decrement").click(function() {
    if (sessionCount > 1) {
      sessionCount -= 1;
      $("#session-length").html(sessionCount);
    }
  });
  //---------------------

  //session increment
  $("#session-increment").click(function() {
    sessionCount += 1;
    $("#session-length").html(sessionCount);
  });
});

</p>

#2

Hello Stanislavas,

The first issue I found with your code(bad practice) is parsing int from html content, rather than initializing the variable locally, and then set the html part as string.
I mean instead of following(bad practice):

let breakCount = parseInt($("#break-length").html());
let sessionCount = parseInt($("#session-length").html());

You’d better go this way(good practice):

let breakCount =5;
$("#break-length").html(breakCount);
let sessionCount=5;
$("#session-length").html(sessionCount);

Now about your problem, I give you some hints.

  1. For the restart, you should grab the values of UI elements(parseInt here) to set the break/session attributes before you go for another start.
  2. Recheck you code, once the operation is finished, you should take back the start button show and stop to hidden for another start.(the bug is it ends with stop-break) button showing.
  3. CHeck you reset button, looks like no any association and event handling for this?!

Happy coding.


#3

Thanks a lot for advice
have solved reset button, from my view it works correctly ,
but I don’t catch how to set the start-button correctly but I will
Thanks


#4

Indeed you can.

Just check when session and break run finished, then check the states of the buttons, it will help you more to find out the issues.

Once again, for starting a new run, put a console.log() at the first line of session function to see the value of the session counter.

More hint: when a run is finished, and you liek to start a new one, you should reset the session and break vars from the UI break/session conf.


#5

Hello again,
I’m sorry for annoying,
I spent over six hours trying to solve this issue but still didn’t,
I can’t correctly to run breakIntreval after press Pause button

Maybe you could suggest anything?
I don’t ask complete solution of this part code
Just some suggestion
I have tried all yours previous suggestion but :rage:

 $('#start-break').click(function(){ //click Run button 
         $("#start-break").hide();
         $("#stop-break").show();
        
        // HOW TO run correctly breakInterval from here 
           // setInterval();    
        
      });

Sorry for troubling :smirk:


#6

Don’t think this way, we are here to help each other.

I would like to ask what’s difference between start_stop and start-break buttons?

As I checked you code, your “start-break” button just show another button, and hide another one, and there is no any more operations to do next! Maybe you should remove “start-break” and work only with “start-stop”?

Just check your sessionTimer function. you see it decrease the sessionCounter by one, then check if there is still counter remain(time) to call itself again. One hint it log the sessionCounter using console.log to see what’s the value.

Another hint: whenever a new session/break needs to be started(probably when start button clicked) you should reset the sesionCounter and breakCounter. Use parseint to conver the value in UI(html) tag for this part.

Another hint: when user likes to increase or decrease the session/break using the form, you should not change the actual breakCounter and sessionCounter. Just parseint the current result, add or mines 1 the value and then reset the UI value.


#7

Thank a lot for suggestions

I just don’t fill up this button because here was may issue
start_stop button I’m using to start the main session and restart session if I press the pause button
the start-break button I’m using to restart break session after if I pressed Pause

I thought again the logic of my issue and yours suggestions
and made some changing in code code
In the line 32 I changed this method:
breakInterval = setInterval(breakTimer, 1000);

and now calling breakTimer() function
and trying to solve issue from this side.
Thanks for advise