Build a Pomodoro Clock Help me

1

i got truble building it here for play button i used setinterval and i need it to stop it for pause and reset function but how could i stop it plz provide me some technique
Thanks in advance
project link:- https://codepen.io/Gunajn/pen/drmvNR

2

Take a look at this. https://www.w3schools.com/jsref/met_win_clearinterval.asp

You need to assign your setinterval to a variable and use clearinterval to stop it.

3

Also, the variable has to be accessible to the function that’s calling it, looking at your setup the pause function won’t have access to the variables in the play function.

Then you need to grab the time when paused so that you can pass the time back to the play function when/if you resume the timer.

4

can you explain me how it can be accessible ?

5

In your case, the simplest would be use global variable. Declare your variable outside your function scope and only assign setInterval into your variable in the function.

6


here is my updated code but still having the same issue
what should i do? guys help me out

7

I’ll send over something in a few minutes.

1 Like
8 
// Query the DOM once and save to a variable
let minute = document.getElementById('minute'),
    second = document.getElementById('second');

// set your 25 minute timer less 1 second and 1 minute
var sec = 59;
var min = 24;

// create a variable for your Timer
let playTimer; 

function playbtn() {
  // define the 'playTimer' variable from above and write a function   
  playTimer = setInterval( function() {
    if (sec < 10) {
      second.innerHTML = '0' + sec;
    } else {
      second.innerHTML = sec;
    }
    
    minute.innerHTML = min;

    // check if sec has reached zero and used parseInt() because for 10 seconds your variable becomes a string!
    if(!parseInt(sec, 10)) sec = 60, min--;
    
    // if the value of minutes and second fall below our 0 we call an end to the Interval
    if(min === -1 && parseInt(sec, 10) === 60) { 
      // reset values on DOM
      minute.innerHTML = '25';
      second.innerHTML = '00';

      // reset values for timer;
      min = 24;
      sec = 59;
      clearInterval(playTimer);   
    }    
    // decrease sec variable by 1;
    sec--;

  }, 1000); 
}

function Reset() {
  // found spelling errors in this function with document.getElementById...
  minute.innerHTML = '25';
  second.innerHTML= '00';
  min = 24;
  sec = 59;
  clearInterval(playTimer);
}

function pausebtn() {
  // using parseInt() because we're getting string data from the DOM
  min = parseInt(minute.innerHTML, 10);
  sec = parseInt(second.innerHTML, 10);
  clearInterval(playTimer);
}

In the html…

    <div class="box">
      <h1>Session</h1>
      <div id="timer">
         <!-- semi-colon moved to outside of span + one space-->
        <span id="minute">25</span> :
        <span id="second">00</span>
      </div>
      <!-- optional - removed alert(), changed reset-timer to confirm() -->
      <button id="start-timer" onClick="playbtn()">play</button>
      <button id="stop-timer" onClick="pausebtn()">Pause</button>
      <button id="reset-timer" onClick="confirm('you want to reset '); Reset();">Reset</button>
    </div>
  </section>
</div>

In the css I added the #Timer { font-size: 50px;} you can remove font size for #minute and #second this was so the semi-colon took the same value.

As an after thought, the reset button is going to reset timer regardless of input from user. You would have to add the code for the confirm() to prevent this. For example…

function Reset() {
  let reset = confirm( 'your question here' );

  if( reset ) {
      // your code
  } 
}

if you go that route be sure to remove it(confirm()) from the HTML

9

thank you so much sir , your code make me clear everything thank a lot sir

10

Your welcome. Good luck with your coding!