CODEWITHSUNDEEP
javascripthtmlcss
Jukker
Jukker

Reputation: 128

Toggle timer between RUN and RESET JS

I want to do a simple timer who can run from 25 to 0 and reset whenever we want to.

For this I've made a clickable div, and I want one click to start the timer and another one to reset it to 25 and stop the timer, is this possible ? A toggable start/reset timer?

This is what I came up with so far :

HTML 

<div id="result" onclick="playReset"><p id="output"></p> </div>

CSS

#result {
  background: pink;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin-left: 400px;
  margin-top: 200px;
}
#result:hover {
 border: black solid;

}
#output{
  margin-left: 70px;
position: fixed;
  font-size: 60px;
}

And the most important the JS :

var duree=25;
var toggle = true;
function playReset () {


if(toggle == true) {
 var time = setInterval(function(){ 
  duree--;

document.getElementById('output').innerHTML = duree;                   
                      }, 1000);

  toggle = false
}
else if (toggle == false) {
  clearInterval(time);
  duree = 25;
  toggle = true;
}

}
document.getElementById('output').innerHTML = duree;

Thank's if someone can give me a hand, I have SO MUCH trouble understanding setInterval/timeout, clearInterval/timeout ...

Upvotes: 0

Views: 122

Answers (2)

Asons
Asons

Reputation: 87191

I simplified that code a little, where you can use the actual time variable to check whether it is running or not.

Stack snippet

var duree = 2;
var time;
function playReset() {
  if (time) {
    clearInterval(time);
    time = null;
    duree = 25;
    document.getElementById('output').innerHTML = duree;
  } else {
    time = setInterval(function() {
      duree--;
      document.getElementById('output').innerHTML = duree;
      if (duree == 0) {
        clearInterval(time);
      }
    }, 1000);
  }
}
document.getElementById('output').innerHTML = duree;
#result {
  background: pink;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin-left: 40px;
  margin-top: 20px;
  border: transparent solid;
}

#result:hover {
  border: black solid;
}

#output {
  margin-left: 70px;
  position: fixed;
  font-size: 60px;
}
<div id="result" onclick="playReset();">
  <p id="output"></p>
</div>

When you later on have increased your skills, you likely want these stuff and their variable hidden from the global environment.

With closure one can do something like this, where only the function name is public.

Stack snippet

(function (output,duree,time) {  //declared as static variables
  this.init_time = duree;
  this.playReset = function() { 
    if (time) {
      clearInterval(time);
      time = null;
      output.innerHTML = duree = init_time; // set init value
    } else {
      time = setInterval(function() {
        output.innerHTML = --duree;
        if (duree == 0) {
          clearInterval(time);
        }
      }, 1000);
    }
  }  
  window.playReset = this.playReset; //make it public
  output.innerHTML = duree; // set init value
  
})(document.getElementById('output'),25);  // pass in the output element and default time
#result {
  background: pink;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin-left: 40px;
  margin-top: 20px;
  border: transparent solid;
}

#result:hover {
  border: black solid;
}

#output {
  margin-left: 70px;
  position: fixed;
  font-size: 60px;
}
<div id="result" onclick="playReset();">
  <p id="output"></p>
</div>

Upvotes: 5

Medda86
Medda86

Reputation: 1630

Here is same solution, but with the event listener and I check the count to know if a reset is to be done. You can try this here:

https://jsfiddle.net/0bej5tyn/

html

<div id="timer">
  25
</div>

css

#timer{
  width:150px;
  height:100px;
  line-height:100px;
  border-radius:100px;
  border:5px solid #444;
  background:#555;
  font-size:50px;
  text-align:center;
  color:#fff;
  font-family:arial;
}

#timer:hover{
  border:5px solid #333;
}

js

var timerButton = document.getElementById("timer");
var countStart = timerButton.innerHTML
var count = countStart;
var timer;

timerButton.addEventListener('click',function(){
    if (count == countStart){
    timer = setInterval(function(){
      count--;
      timerButton.innerHTML = count;
      if (count == 0){
        clearInterval(timer);
      }
    },1000);
  }
    else{
      /* Reset here */
      clearInterval(timer);
      count = countStart;
      timerButton.innerHTML = count;
    }
});

Upvotes: 0

Related Questions