25 + 5 Clock all tests failed

Hello guys!

Now I’m working on my version of 25 + 5 Clock, this is codepen: https://codepen.io/faber_g/pen/WNJOOwp

For now timer can pass 11 tests. Test run stoped after test #12. Timer is working, I checked with example and functions is the same.

I defenatly doing somthing wrong. Maybe be I wrong understand the main task?

All failed tests start with :
Script error. (:0)
Error: Script error. (:0)

Can you take a look and maybe give me some hints. Thank you!

select correct test from drop menu

also there is some drift in timer the way your doing it i think. you need to use .getTime() if i remember rightly in a timer function. i think i got it from some existing code, probably on codepen. have a look for fcc on there or something if you need.

@ugwen thank you for your reply!

select correct test from drop menu

Probably It was some bug. I had a small peace of JS code above react, after I daleted it, it starts go through 11 tests and stoped at test #12.

also there is some drift in timer the way your doing it i think. you need to use .getTime() if i remember rightly in a timer function. i think i got it from some existing code, probably on codepen. have a look for fcc on there or something if you need.

Regarding .getTime(), I don’t think it should be an issue, because for this two days I saw a lot of other projects and they also don’t use this method to make timer more accurate.(for example: https://codepen.io/sirstevekim/pen/PoQwjBX)

I went through forum and searched for same question as mine. Here also many tests was failed and error message was same as I have:

Script error. (:0)
Error: Script error. (:0)

But he solved this problem by removed all React hooks (useState, useEffect, useRef). In my code I don’t have such hooks.

So still don’t understand where is the problem.

1 Like

okay, I have some progress

In button element I used fuctions, but wrote them in this way:

<button id="break-decrement" onClick={this.state.breakMinutes > 1 ? this.decrementBreak : this.state.breakMinutes}><i className="fa fa-minus-circle fa-lg" aria-hidden="true"></i></button>

Then I changed it to(make it as a function):

<button id="break-decrement" onClick={() => {this.state.breakMinutes > 1 ? this.decrementBreak() : this.state.breakMinutes}}><i className="fa fa-minus-circle fa-lg" aria-hidden="true"></i></button>

So now I can pass 23/29 tests. Other six probably somehow related with reset button, because when do test run, it can not stop (foe example on test #13)and it is looks like infinite loop.

Now all fail tests showing this:

Script error. (:0)
Error: Script error. (:0)
    at r.onerror (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:14032)

Will continue to search bug and try to make it work, but if somebody have some ideas, I will be very appreciate for help.

The problem of my code is that it doesn’t countdown to “00:00” or it switchs too fast, so you can only see “00:01” and then it changes to new cycle.

First in my function this.changeName() I go with this code, but it swithes too fast, so you can not see “00:00”:

changeName() {
   if (this.state.timerAmount === 0 && this.state.timerName === 'Session') {
        this.playSound();
        setTimeout(() => {this.setState(state => ({
          timerAmount: this.state.breakMinutes * 60,
          timerName: 'Break'
    })); },2000);    
     } 
    else if (this.state.timerAmount === 0 && this.state.timerName === 'Break') {
      this.playSound();
      this.setState(state => ({
         timerAmount: this.state.sessionMinutes * 60,
         timerName: 'Session'
    })); }
  }
  

Then I’ve tried by using innerHTML/innerText/innerContent first stay on “00:00” and after that using setTimeout for this.setState to change velue for new cycle with delay, but in this case I get empty element for some time and then it is start new cycle:

changeName() {
   if (this.state.timerName === 'Session') {
       
        document.getElementById('time-left').innerHTML = "00:00"
        this.playSound();
        setTimeout(() => {this.setState(state => ({
          timerAmount: this.state.breakMinutes * 60,
          timerName: 'Break'
    })); },2000);    
     } 
    else if (this.state.timerName === 'Break') {
      document.getElementById('time-left').innerText = "00:00";
      this.playSound();
      setTimeout(() => {this.setState(state => ({
         timerAmount: this.state.sessionMinutes * 60,
         timerName: 'Session'
    }));} , 2000);
  }
  

But then I found my problem.

In clockInfo() I have condition if (timer > 0) return "00:00". So when my timer showed “00:00”, it start changeName() function and that is how I got empty element for some time.

I deleted changeName() and isertes it’s conditions into clockInfo() like this:

clockInfo() {
    if (this.state.timerAmount < 0) {
      
      if (this.state.timerName === 'Session') {
        "00:00"
        this.playSound();
        this.setState(state => ({
          timerAmount: this.state.breakMinutes * 60,
          timerName: 'Break'
    }));     
     } else if (this.state.timerName === 'Break') {
       "00:00"
      this.playSound();
      this.setState(state => ({
         timerAmount: this.state.sessionMinutes * 60,
         timerName: 'Session'
    }));
   }
  } else {
    let minutes = Math.floor(this.state.timerAmount / 60);
    let seconds = this.state.timerAmount - minutes * 60;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    return minutes + ':' + seconds;
    }
   }

When timer < 0, first it shaw “00:00”, then play sound and then start function, but in this case without any empty element. So now all works very well.

1 Like