How to create pause button for the Pomodoro Clock project

1

I’m having trouble figuring out how to include a pause button for my pomodoro clock. I used setInterval to start my clock and it ticks until 0, then the text returns to the previous inputted number. I want to access setInterval in order to manipulate it when I press a pause button. I put the setInterval function inside my start button click function so I have no way of accessing it after I press the start button. How can I access setInterval in order to manipulate it if it is already inside a click function?

Sorry if my code looks messy. Hope you guys can read it. Thanks!

Here is my pomodoro codepen: https://codepen.io/scanny/pen/VppYjZ?editors=1111

Here is the code for my start button:


$('#startButton').on('click', function(){
    
    var inputNum = $('#displaySecs').html();
    console.log(inputNum);
    var zeroMinuteRegex =/0/;
    var numberMinuteRegex = /\d+/;
    var minuteInt;
    var inputZero = inputNum.match(zeroMinuteRegex);
    var minuteNumber = inputNum.match(numberMinuteRegex);
    //console.log(minuteNumber);
    /*if(inputZero[0] == "0"){
      minuteInt = 0;
    }
    */
    
  
      minuteInt = parseInt(minuteNumber[0]);
    
   // console.log(inputZero);
    //console.log(minuteInt);
    
    
    var secondsRegex = /:\d{2}/
    var secondsNoColonRegex = /\d{2}/
    var secondsColon = inputNum.match(secondsRegex);
    console.log(secondsColon);
    var secondsString = secondsColon[0].match(secondsNoColonRegex);
    console.log(secondsString);
    var secondInt;
    if(secondsString == "00"){
      secondInt = 0;
    }
    else{
      secondInt = parseInt(secondsString);
    }
    console.log(secondInt);
    
    var originalInt = minuteInt;
    
    var intSeconds = minuteInt * 60 +secondInt;
    
   
  
  var newInterval = setInterval(Start, 1000);
  
  function Start(){
    
    intSeconds--;
  
    
    var hr = Math.floor(intSeconds / (60 * 60));
    var divisorForMinutes = intSeconds % (60 * 60);
    var mins = Math.floor(divisorForMinutes / 60);
     var divisorForSeconds = divisorForMinutes % 60;
    var secs = Math.ceil(divisorForSeconds);
    var seconds;
    if(secs < 10){
      seconds = "0" + secs;
    }
    else{
      seconds = secs;
    }
    
    var hours = hr;
    var minutes = mins;
    
    
    var time = minutes + ":" + seconds;
    
    $("#displaySecs").html(time);
    
    if(intSeconds<0){
      clearInterval(newInterval);
      $('#displaySecs').html(inputNum);
      alert('time is up!');
      return;
    }    
    
    
  }
    
  });
2

Nevermind I figured it out. It turns out that I just had to nest a pause button click function inside my start button click function.