Phase Change help for Pomodoro Clock project

JavaScript
1

Can someone help explain why this.phaseChange() isn’t executing? How I can go about implementing a phaseChange? Thanks!!

See the Pen Pomodoro Clock by Kristian (@Kristians) on CodePen.

2

You have two problems.

First, that code:

  time() {

    this.interval = setInterval(() => {
      this.setState({
        sessionTimer: this.state.sessionTimer - 1,
        timer: this.state.timer -1
      })
    }, 1000)

    if (this.state.timer === '00:00') {
      clearInterval(this.interval)
      this.phaseChange();
    }

  }

is in the wrong order. That if statement is outside the interval so it is only going to get checked once. You want it inside the interval so it gets checked every time. Since setState is async, it should either be before the setState or in a callback as a second parameter of setState.

The other problem is that you have defined timer like this:

      timer: 1500,

but are checking it like this:

    if (this.state.timer === '00:00') {

You are confusing your data types. You need to check if timer equals 0. Or for better safety, if is is <= 0.

3

Thanks, I’ve made a few changes . I can’t pass the reset timer test for the life of me. It seems to be resetting properly but it’s not passing the test for some reason . Can you please explain why it’s not passing the reset test?

4

OK, this took some digging. The error says:

  1. When I click the element with the id of “reset”, any running timer should be stopped, the value within id=“break-length” should return to 5, the value within id=“session-length” should return to 25, and the element with id=“time-left” should reset to it’s default state. Error: Default timer label was not properly reset
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:147:300710

The most important line there is “Error: Default timer label was not properly reset”.

Now, this is not explicitly linked to anything in the problem description so I dug through the test code and found the relevant code:

//...
const orignalTimerLabel = document.getElementById('timer-label') && document.getElementById('timer-label').innerText;
//...
const timerLabelAfterReset = document.getElementById(
  'timer-label'
).innerText;
//...
if (orignalTimerLabel !== timerLabelAfterReset) {
  reject(
    new Error('Default timer label was not properly reset')
  );
}
//...

OK, so it is looking at #timer-label and seeing if it reverts back to it’s original after a reset. It starts out as a string, “Session”. I notice that if it is in the middle of a break and I hit reset, it does not change back to “Session” - that is the problem.

When I fixed that, it passed that test.

1 Like