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.
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.