Pause-resume function on countdown timer (Javascript)

Question

Currently creating a 25 minutes countdown timer with timing incrementing/decrementing buttons. I managed to create the timer and get it to work when pressing "Start" button, but I'm struggling to find a way for inserting a function to pause it when "Pause" button is pressed and resume when "Start" button is pressed. I've checked several threads on this matter but I cannot make the solutions proposed work with my logic. Any hint would be appreciated. Please, find below my code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>25 + 5 Clock</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles/styles.css">

    <style>
      * {
  text-align: center;
  }
    </style>


  </head>
  <body>
    <h1>25 + 5 Clock</h1>
    <div class="row" id="columnas">

    <div class="col" id="break-label">Hey you!
    <div class="5">
        <button id="break-decrement" class="btn btn-primary" type="button" name="button" onclick="breakDec()">break-dec</button>
        <div id="break-length">5</div>
        <button id="break-increment" class="btn btn-primary" type="button" name="button" onclick="breakInc()">break-inc</button>
    </div>
    </div>


    <div class="col" id="session-label">Session length
    <div class="25">
      <button id="session-decrement" class="btn btn-success" type="button" name="button" onclick="sessionDec()">session-dec</button>
      <div id="session-length">25</div>
      <button id="session-increment" class="btn btn-success"   type="button" name="button" onclick="sessionInc()">session-inc</button>
    </div>
    </div>

    </div>



    <div class="tiempo">
          <div id="timer-label">Session</div>
          <div id="time-left">
            <span class="minutes_value" id="minute_value">25</span>:
            <span class="seconds_value" id="second_value">00</span>
            </div>
    </div>

    <div class="botones">
    <button id="start_stop" type="button" name="button" onclick="alertMe()">Start</button>
    <button id="reset" type="button" name="button">Reset</button>
    </div>

    <button type="button" name="button" id="clickButton">Pause</button>

    <! -- Break decrement      -->
    <script>

      function breakDec() {
        if (document.getElementById("break-length").innerHTML <= "1") {
          document.getElementById("break-length").innerHTML === parseFloat(1)
        }
        else {document.getElementById("break-length").innerHTML = parseFloat(document.getElementById("break-length").innerHTML) - parseFloat( 1)}

      }
    </script>

    <! -- Break increment      -->
<script>
    function breakInc() {
      document.getElementById("break-length").innerHTML = parseFloat(document.getElementById("break-length").innerHTML) + parseFloat( 1)
    }
  </script>

  <! -- session decrement      -->

      <script>

        function sessionDec() {

          if (document.getElementById("session-length").innerHTML <= 1) {
            document.getElementById("session-length").innerHTML === parseFloat(1)
          } else
          {document.getElementById("session-length").innerHTML = parseFloat(document.getElementById("session-length").innerHTML) - parseFloat( 1);
          document.getElementById("minute_value").innerHTML = parseFloat(document.getElementById("minute_value").innerHTML) - parseFloat( 1);}
        }
      </script>

      <! -- Session increment      -->
  <script>
      function sessionInc() {
        document.getElementById("session-length").innerHTML = parseFloat(document.getElementById("session-length").innerHTML) + parseFloat( 1);
        document.getElementById("minute_value").innerHTML = parseFloat(document.getElementById("minute_value").innerHTML) + parseFloat( 1);
      }
    </script>

    <! -- *****************************************************************************************      -->
    <! -- C          O          U          N          T          D          O          W          N      -->
    <! -- *****************************************************************************************      -->
    <! -- *****************************************************************************************      -->
    <! -- *****************************************************************************************      -->

    <script>

    function alertMe()  {

      const deadlineTime = new Date(new Date().getTime() + parseFloat(document.getElementById("minute_value").innerHTML) * 60000);
      setInterval(function() {

    //current time
    const currentTime = new Date();

    //show the start time, equivalent to 5 minutes(300000)
    const time_start = deadlineTime - currentTime;

    //converting the time in minutes
    const min_info = Math.floor((time_start % (1000 * 60 * 60)) / (1000 * 60));

    //converting time in seconds
    const sec_info = Math.floor((time_start % (1000 * 60)) / 1000);

    //mostrar temporizador
    document.getElementById("minute_value").innerHTML = min_info;
    document.getElementById("second_value").innerHTML = sec_info;

    if (time_start < 0) {
      clearInterval(alertMe);
      document.getElementById("minute_value").innerHTML = "0";
      document.getElementById("second_value").innerHTML = "0";
    }

     }, 5);

}

</script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" charset="utf-8"></script>


  </body>
</html>

woodendoors7 · Answer 1 · 2023-08-24T12:08:45.780

0

This is quite a simple but effective solution.

Make a new top level variable like let started = false.

Then, code the buttons so the start button sets it to true, and the pause button sets it to false. Then, check if started is false on the beginning of the timeout, and if it is, return, which will stop running the function for that interval.

let started = false;

// ...etc

setInterval(()=>{
    if(!started) return;
    // ...etc
}, 5)

edited Aug 24 '23 at 12:08

answered Aug 18 '23 at 09:52

woodendoors7

92
1
11

thank you for your answer, @woodendoors7. I understand the logic behind your words, but I'm quite newbie at this and I'm not being able to implement it on my code :( – Bob Marin Aug 21 '23 at 17:43
Which part would you like clarified? @BobMarin – woodendoors7 Aug 24 '23 at 12:09

Pause-resume function on countdown timer (Javascript)

1 Answers1