How to make a timer show and hide divs?

Question

so I'm trying to make this "workout app" that cycles through different divs that show how to do the workout on an interval of 60 seconds each with the ability to pause.

I'm unsure on how to make this work with vanilla Javascript, HTML and CSS; but essentially I want to do the following.

a div that displays the content with a 60-second timer with play and pause
after 60 seconds a new workout will pop up
have this repeat for 5 intervals

if anyone can show me a stripped-down version of this to get me started, it would be greatly appreciated.

60 seconds to show each div with a 60 second pause between divs? — s.kuznetsov, Apr 17 '21 at 22:25
Please [edit] your post to show research you have done and attempts made to solve the issue. There are many existing questions regarding each piece of this question. It is expected that you have tried putting them together; [Calling a function every 60 seconds](https://stackoverflow.com/q/3138756/215552); [how to pause timer or freeze it and resume -> javascript](https://stackoverflow.com/q/5855803/215552); [How do you repeat a javascript function a set number of times, at a set interval?](https://stackoverflow.com/q/57381625/215552) — Heretic Monkey, Apr 17 '21 at 22:51

score 1 · Accepted Answer · answered Apr 17 '21 at 22:27

This answer assumes that you have basic knowledge with HTML, CSS and Javascript.

to hide a div after a given period of time you could use the setInterval function.

Here's a simple example:

let currentDiv = 1;
let timer = setInterval(changeDiv, 2000); //set to 60000 for 60 seconds
let maxNumOfDivs = 3;

function changeDiv() {
  if (currentDiv < maxNumOfDivs) {

    var currentElement = document.getElementById("div" + currentDiv);
    currentElement.classList.add("invisible");
    var nextElement = document.getElementById("div" + (currentDiv + 1));
    nextElement.classList.remove("invisible");
    currentDiv += 1;
  } else {
    clearInterval(timer);
  }
}

.invisible {
  display: none;
}

<div id="div1">i am the first div</div>
<div id="div2" class="invisible">i am the second div</div>
<div id="div3" class="invisible">i am the third div</div>

This is actually very helpful! Thank you so much, I think I can definitely work with this. I apologize for not posting any code. All of the "functions" I wanted to add were all separated and would be extremely confusing for anyone to decipher. — cresenmoon, Apr 17 '21 at 23:01
@cresenmoon If this code was the answer you were looking for, kindly mark it as an answer. Thanks. — Tarek, Apr 18 '21 at 07:42

How to make a timer show and hide divs?

1 Answers1