CODEWITHSUNDEEP
javascriptrepeatcountdowntimer
Aleg Moi
Aleg Moi

Reputation: 9

How to loop two sequential counters and display them cycle number of the loop

I have an application that needs to display on an HTML-screen two countdown timers, one after the other, each countdown timer has its own duration taken from a database. This sequence of displaying the two countdown timers needs to be repeated a certain number of times, the value of which is also taken from the database.

I am an absolute noob in JavaScript and I'm struggling to find a way to:

  1. display the number of the cycle;
  2. run both timers one after the other, so the second timer only starting when the first timer has finished.

All displays and timers start running at the same time and not sequentially and the repeat number is displayed immediately with its end value and not increasing in a step-by-step manner.

Can anyone help me out on this?

I am working on the basis of this JavaScript:

    <script>
      var Repeats = {{ fase['rep'] }};
      var timeleftEdge = {{ fase['edge'] }};
      var timeleftFace = {{ fase['face'] }};

      for (let index = 1; index <= Repeats; index++) {
            document.getElementById("RepeatCounter").innerHTML = "Herhaling : " + index.toFixed(0) + "e keer";
            RunTimer(timeleftEdge, 'countdownEdge', 'Edge');
            RunTimer(timeleftFace, 'countdownFace', 'Face');
        }

      function RunTimer(timeleft, DIV_ID, Type) {
        var Timer = setInterval(function(){
          if(timeleft <= 0){
            clearInterval(Timer);
            document.getElementById(DIV_ID).innerHTML = "Klaar";
          } else {
            document.getElementById(DIV_ID).innerHTML = Type + " :   " + timeleft.toFixed(1) + " seconden te gaan";
          }
          timeleft -= 0.1;
        }, 100);
      }
    </script>

I have tried to use Promise, async/await, but cannot make it work.

Runable Example:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <title> Timer Scherm </title>
  </head>
  <body>
    <div class="container">
        
        
    <h1> Timer Scherm </h1>
    </br>

    <div class="row mb-3 text-left">
      <div class="col-6 col-sm-1 themed-grid-col"><h5>Step: 3</h5></div>
      <div class="col-6 col-sm-4 themed-grid-col"><h5>Fase: 15m 3 Sets Rapid</h5></div>
      <div class="col-6 col-sm-2 themed-grid-col"><h5>Edge: 3.0 sec.</h5></div>
      <div class="col-6 col-sm-2 themed-grid-col"><h5>Face: 6.0 sec.</h5></div>
      <div class="col-6 col-sm-2 themed-grid-col"><h5>Reps: 3 times</h5></div>
    </div>

    <h1 class="text-primary">
      <p id="RepeatCounter"></p>
    </h1>

    </br>

    <h1 class="text-danger">
      <div id="countdownEdge"></div>
    </h1>

    </br>

    <h1 class="text-success">
        <div id="countdownFace"></div>
    </h1>

    <script>
      var Repeats = 3;
      var timeleftEdge = 3.0;
      var timeleftFace = 6.0;

      for (let index = 1; index <= Repeats; index++) {
            document.getElementById("RepeatCounter").innerHTML = "Repeat : " + index.toFixed(0) + " time";
            RunTimer(timeleftEdge, 'countdownEdge', 'Edge');
            RunTimer(timeleftFace, 'countdownFace', 'Face');
        }

      function RunTimer(timeleft, DIV_ID, Type) {
        var Timer = setInterval(function(){
          if(timeleft <= 0){
            clearInterval(Timer);
            document.getElementById(DIV_ID).innerHTML = "Ready";
          } else {
            document.getElementById(DIV_ID).innerHTML = Type + " :   " + timeleft.toFixed(1) + " seconds remaining";
          }
          timeleft -= 0.1;
        }, 100);
      }
    </script>



    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="/static/js/jquery-3.7.1.slim.min.js"></script>
    <script src="/static/js/popper.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>

  </body>
</html>

Upvotes: 0

Views: 53

Answers (0)

Related Questions