Pomodoro clock won't pass the requirements

JavaScript
1

Hi, I am having some problems getting my React pomodoro project to pass the requirements. It doesn’t seem to be seeing that my counter is changing even though it clearly is. Can someone have a look and see if there is something I am missing.

Thanks in advance

https://codepen.io/zelig85/pen/oNjxdjN?editors=0010

2

I tried inspecting your p element while the timer is running using dev tools and compared it with Example App, i have noticed one difference. Your component is only decrementing and updating the seconds part of the time left every 1000ms while the Example app is updating both the minutes and seconds part every 1000ms. Try rewriting your code to do the same.

3

Thanks I’ll give it a go. It’s weird that such a possibility wasn’t accounted for. I’d be surprised if I was the only one who chose to do it the way I did

4

You are not alone. I spent over two weeks working on that project. It is a bit demanding to make all the tests pass. It is important to compare your app with the example they have given otherwise you will implement all the features they ask for and working fine but the tests won’t pass.

5

I am not sure how you are checking it is updating. I use react dev tools to see what the how things are updating. I can see my state and what is updating but when I try to check the example app I can’t seem to find the details in the same way. When i click on component there is a weird dom structure which doesn’t equate to what is happening in the app. Are you using a different dev tools?

6

If you are using chrome, right-click the browser. Select inspect. The chrome DevTool will appear. Yes a weird DOM tree will appear because the DOM tree includes codepen elements and the app elements are hidden inside. Click the div with id result-iframe-wrap you will see the iframe element inside. There is an arrow with #document text. Clicking it will open the DOM tree for the app. Follow the DOM tree to access the timer. You will notice how react updates the element.

7

Hey nibble. Is there any chance I could ask you to have a look at my pomodoro clock again? I have passed everything except the final test (resetting the audio if someone presses the reset button) I have asked people on the forum but no one has answered. I don’t know how to do what it is asking me. I added a pause and reset to zero of the audio in the reset function but doing so prevents the audio playing at all. Any suggestions would be appreciated

8

I have looked at your code but i must admit it is really difficult to understand what you are trying to do. I am not sure whether your code has changed since your last post but by looking at it now, there is something you are doing which you shouldn’t. In the updateTimer method, you are playing the audio and immediately calling the handleReset method yet it is the handleReset method which also stops playing the audio. That is why as the code is now, the audio does not play even if the timer reaches zero.

 if (timerSeconds === 0 && timerMinutes === 0) {
      document.getElementById("beep").play(); // Plays audio
      clearInterval(this.myInterval);
      this.handleReset();  //stops playing audio
      this.setState((prevState) => {
        return {
          isRunning: !prevState.isRunning,
          timerMinutes: this.state.isBreak ? breakLength : SessionLength,
        };
      });
      this.handleStartStop()
      
    }

Secondly the assignment requires one to be able to reset the timer even when it is running however when you look at your design, one can reset only when the timer is paused. Sometimes the error messages could be deceptive. Make the reset button to be visible so that the user of your pomodoro clock can reset it whether the timer is paused or running (You can add more features if it passes all tests)

I have also found it difficult to understand your code because of the Boolean parameter you keep passing to the handleReset and handleStartStop methods. What exactly is it?

I have forked your pen and also trying to change a few things to see whether i can make it pass all tests.

9

Thanks. The reason for the Boolean is as follows. The reset function runs in two cases: case 1 when the timer reaches zero . case 2 the user presses the reset button. If the reset function is ran due to case 1 the app starts counting down from the next session. If case 2 the app fully resets and doesn’t restart until the user tells it to. I know this isn’t ideal but it is due to the requirement that it new sessions start without the user doing anything. This isn’t something I would want but hey.

10

Insofar as the way the audio is being is handled. Yeah, that is my issue. If I remove that process it plays the audio but fails the test which says it should reset if the user presses the reset button. I can get one or the other test to pass but not both.

Thanks for taking the time to look at it.