Pomodoro Clock - Countdown timer value reset to default value - Solved

Pomodoro Clock - Countdown timer value reset to default value - Solved
0

#1

I’m stuck

my “seconds” value starts at 59(default value)

but when the pause button is clicked (ie after the countdown begins)…

and the play button is hit again, it begins at 59! instead of the cuurent value of seconds at the time pause was clicked… please help


```javascript
var y = parseInt(document.getElementById("myP1").innerHTML);
var z = parseInt(document.getElementById("h1").innerHTML);

var f;

function addTo1() {
  y = y + 5;
  document.getElementById("myP1").innerHTML = y + "m";
  document.getElementById("h1").innerHTML = y + ":" + 0 + 0;
}

function subFrom1() {
  if (y > 5) {
    y = y - 5;
    document.getElementById("myP1").innerHTML = y + "m";
    document.getElementById("h1").innerHTML = y + ":" + 0 + 0;
  }
}

document.getElementById("btn").addEventListener("click", function() {
  var min = z - 1;
  var sec = z - z + 59;

  f = setInterval(function() {
    document.getElementById("h1").innerHTML = min + ":" + sec;
    if (min === 0 && sec === 0) {
      document.getElementById("h1").innerHTML = "0:00";
      document.getElementById("mp3").play();
      clearInterval(f);
    } else if (sec === 0) {
      min--;
      sec = 59;
    }
    sec--;
  }, 50);

});
<div class="container">
  <h1>Pomodoro Clock</h1>
  <div class="button">

    <div class="sess">
      <p>Sesion Length</p>
      <div class="btn">
        <button onclick="subFrom1()">
                -
                </button>
        <p class="p1" id="myP1">25m</p>
        <button class="add" onclick="addTo1()">
                +
                </button>
      </div>
    </div>

  </div>
  <h2 id="h1">25:00</h2>
  <button id="btn">
        play</button>
  <button id="btn1">
        pause
          </button>
  <button id="btn4">
            reset</button>
</div>

#2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

A link to codepen would be helpful too


#3

yeah it would be helpful to see the whole code in codepen or a fiddle, svp


#4

#6

``https://codepen.io/charlesonunze/pen/pwgrXj?editors=0011


#7

Well, you do have a scope issue with your variables – essentially what’s happening is that everything that occurs in your handler for the event listener attached to “btn1” is being ignored and overwritten by the handler for the event listener attached to “btn”.

In order to do what you’re attempting you’ll need the “btn1” and “btn” handlers to have access to the same variables.


#8

an edit on jsfiddle would be appreciated


#9

sorry for my delay, had to go afk for a while and just saw your reply – however, looking at your updated codepen it looks like you’re figuring it out


#10

Yea! Thanks a bunch! I declared them as global variables…

Everything’s working fine…

But still one more thing (its not an issue tho), but i want the values of seconds less than ten to have a zero digit before it, you know like “20:09” instead of “20:9”…

I’ve tried a couple of things, not working…


#11

not sure what you tried but you could do a check directly after the “sec–” statement to see if the value is less than 10 and, if so, prepend the current value of “sec” with “0” (“0” as a string, not a number)

something like

sec--;
sec = sec < 10 ? "0" + sec : sec;

#12

Thank you!

Here’s what I did…

if(sec>=1 && sec<=9) {
     //i really cant explain the logic here, but it worked once I added the if statement
     sec = sec < 10 ? "0" + sec : sec; 
    }

#13

hmm, not sure why what I posted wouldn’t work on its own, but anyway if you’re going to do it that way you could probably simplify it like so:

if (sec < 10) {
  sec = "0" + sec;
}

#14

yea, tried that to, returned NaN when it hit zero…