Pomodoro Timer goes negative and counts up

user_14885050 0
Viewed 67

I have a pomodoro timer that is supposed to count down the "workminutes" a user has input and then the break minutes and then loop. The timer starts to count down WorkMinutes like it should and then break minutes(like it should), it then restarts and counts down the workminutes again like it should BUT when its done with that and it comes to the breakminutes a second time instead of counting down from eg. 1 minute it counts from -1 minute and up, so -1 minute and one second and so on. I'm a complete beginner in JavaScript so it would be very nice if you kept that in mind, any help i greatly appreciated. Here is the JavaScript code:

  // we need some variables to store the work and break minutes 
  var workSeconds = "120", breakSeconds = "60";
  // and a referens to interval
  var xInterval;

  var audio = new Audio('Bell_finished.mp3');

  // start function
  function start() {          
      xInterval = setInterval(workCountDown, 1000);
  }
  // stop function
  function stop() {
      clearInterval(xInterval);
  }
  // reset function; calls stop, save which re-stores the values of user inputs and then starts again.
  function reset() {
      stop();
      save();
      start();
  }
  // save function that saves the values of user inputs
  function save() {
      workSeconds = parseInt(document.getElementById("TaskTime").value)*60;
      breakMinutes = parseInt(document.getElementById("BreakTime").value)*60;           
  }
  
  // working count down function
  function workCountDown() {
      // counting down work seconds
      workSeconds--;
      // showing work seconds in "0:0" format: 
      document.getElementById("timer").innerText = Math.floor((workSeconds / 60)).toString() + ":" + (workSeconds % 60).toString();
      
      // if workSeconds reaches to zero, stops the workInterval and starts the breakInterval:
      if (workSeconds == 0) {
          audio.play();
          console.log("relaxing...");
          clearInterval(xInterval);
          xInterval = setInterval(breakCountDown, 1000);
      }
  }
  
  // breaking count down function
  function breakCountDown() {
      // counting down break seconds
      breakSeconds--;
      // showing break seconds in "0:0" format: 
      document.getElementById("timer").innerText = Math.floor((breakSeconds / 60)).toString() + ":" + (breakSeconds % 60).toString();
      
      // if breakSeconds reaches to zero, stops the breakInterval, resets the variables to initial values by calling save function and starts the workInterval again:
      if (breakSeconds == 0) {
          audio.play();
          console.log("ready to work...");
          reset();
      }
  }
timer javascript
1 Answers

as I said in the comment it works fine, just change breakMinutes to breakSeconds inside save function. here is an implementation of your code. you can run the snippet here and see the result

// we need some variables to store the work and break minutes
      let workSeconds = "120",
        breakSeconds = "60";
      // and a referens to interval
      let xInterval;
      let isStarted = false;

      // start function
      function start() {
        xInterval = setInterval(workCountDown, 1000);
      }
      // stop function
      function stop() {
        clearInterval(xInterval);
      }
      // reset function; calls stop, save which re-stores the values of user inputs and then starts again.
      function reset() {
        stop();
        save();
        start();
      }
      // save function that saves the values of user inputs
      function save() {
        workSeconds =
          parseInt(document.getElementById("TaskTime").value || 120, 10) * 60;
        breakSeconds =
          parseInt(document.getElementById("BreakTime").value || 60, 10) * 60;
      }

      // working count down function
      function workCountDown() {
        // counting down work seconds
        workSeconds--;
        // showing work seconds in "0:0" format:
        document.getElementById("timer").innerText =
          Math.floor(workSeconds / 60).toString() +
          ":" +
          (workSeconds % 60).toString();

        // if workSeconds reaches to zero, stops the workInterval and starts the breakInterval:
        if (workSeconds === 0) {
          console.log("relaxing...");
          clearInterval(xInterval);
          xInterval = setInterval(breakCountDown, 1000);
        }
      }

      // breaking count down function
      function breakCountDown() {
        // counting down break seconds
        breakSeconds--;
        // showing break seconds in "0:0" format:
        document.getElementById("timer").innerText =
          Math.floor(breakSeconds / 60).toString() +
          ":" +
          (breakSeconds % 60).toString();

        // if breakSeconds reaches to zero, stops the breakInterval, resets the variables to initial values by calling save function and starts the workInterval again:
        if (breakSeconds === 0) {
          console.log("ready to work...");
          reset();
        }
      }

      const startButton = document.getElementById("start-btn");

      startButton.addEventListener("click", (e) => {
        isStarted = !isStarted;
        if (isStarted) {
          save();
          start();
          startButton.textContent = "Stop";
        } else {
          stop();
          startButton.textContent = "Start";
          document.getElementById("timer").innerText = 0;
        }
      });
    <label>Work Time: <input type="number" id="TaskTime" value="1" /></label>
    <label>Break Time: <input type="number" id="BreakTime" value="1" /></label>

    <div id="timer">0</div>
    <button id="start-btn">Start</button>

user_49494200
Related