CODEWITHSUNDEEP
javascript
Bimo
Bimo

Reputation: 6667

creating a countdown timer in javascript with automatic reload

Three problems, my start button starts more than one timer at the same time instead of only once for multiple clicks to start. Second, my stop button doesn't work. and my reset button, changes the text but doesnt stop the timer. Here's my code:

function stopTimer(timer) {
  clearInterval(timer);
}

function resetTimer(duration, display) {
  var timer = duration,
    minutes, seconds;

  minutes = parseInt(timer / 60, 10);
  seconds = parseInt(timer % 60, 10);

  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  display.textContent = minutes + ":" + seconds;
}


function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;

    // Beep when counter reaches zero
    if (--timer < 0) {
      timer = duration;
      var context = new AudioContext();
      var oscillator = context.createOscillator();
      oscillator.type = "sine";
      oscillator.frequency.value = 800;
      oscillator.connect(context.destination);
      oscillator.start();
      setTimeout(function() {
        oscillator.stop();
      }, 100);
    }
  }, 1000);
}

var time_in_seconds = 5;
display = document.querySelector('#time');

document.getElementById("start").addEventListener("click", function() {
  startTimer(time_in_seconds, display);
});

document.getElementById("stop").addEventListener("click", function() {
  stopTimer(timer);
});

document.getElementById("reset").addEventListener("click", function() {
  resetTimer(time_in_seconds, display);
});
<html>

<body>
  <div id="time">00:10</div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>
  <script>
  </script>
</body>

</html>

Upvotes: 1

Views: 170

Answers (1)

Bimo
Bimo

Reputation: 6667

var duration = 5;
var timer_id = null;
var timer_seconds = duration;
var timer_active = 0;
var display = document.querySelector('#time');

function BeepOnce() {
  timer_seconds = duration;

  var context = new AudioContext();
  var oscillator = context.createOscillator();

  oscillator.type = "sine";
  oscillator.frequency.value = 800;
  oscillator.connect(context.destination);
  oscillator.start();
  setTimeout(function() {
    oscillator.stop();
  }, 100);
}

function UpdateDisplay() {
  var minutes = parseInt(timer_seconds / 60, 10);
  var seconds = parseInt(timer_seconds % 60, 10);

  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  display.textContent = minutes + ":" + seconds;
}

function TimerReset() {
  timer_seconds = duration;
  timer_active = 1;
  UpdateDisplay();
}

function TimerStart() {
  timer_seconds = duration;
  timer_active = 1;
  UpdateDisplay();
}

function TimerStop() {
  timer_active = 0;
  /*clearInterval(timer_id);*/
}

function TimerInit() {
  UpdateDisplay();

  var fun1 = function() {
    if (timer_active) {
      // Beep at Zero Seconds
      if (--timer_seconds < 0) {
        BeepOnce();
        TimerReset();
      }
      // Countdown
      else {
        UpdateDisplay();
      }
    }
  }

  //called timer every second
  timer_id = setInterval(fun1, 1000);
}

TimerInit();


document.getElementById("start").addEventListener("click", function() {
  TimerStart();
});

document.getElementById("stop").addEventListener("click", function() {
  TimerStop();
});

document.getElementById("reset").addEventListener("click", function() {
  TimerReset();
});
<html>

<body>
  <div id="time">00:10</div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button></body>

</html>

Upvotes: 2

Related Questions