I’m trying to complete the ‘Build a 25 + 5 Clock’ project in FCC, and I can’t seem to reproduce the “error” that is showing up in Debug mode. Based on what I’m seeing in Editor view, there’s no reason why it shouldn’t pass. If anyone could please help identify what the issue is, I’d really appreciate it. The test that is failing is test 11:
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.
The error that shows up is:
Script error. (:0)
Error: Script error. (:0)
at a.onerror (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:13785)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:112350
at p (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:94539)
at Generator.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:95876)
at Generator.next (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:94902)
at r (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1169)
at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1380)
var t=this,a=arguments;return new Promise((function(n,o){var i=e.apply(t,a);function s(e){r(i,n,o,s,u,"next",e)}function u(e){r(i,n,o,s,u,"throw",e)}s(void 0)}))
My code is pasted below, and is also available on CodePen (https://codepen.io/lukerFCC/pen/pomgqQp). Any help would be greatly appreciated! Thank you!
const initState = () => {
return {
status: 'session',
breakTime: 5,
sessTime: 25,
currTime: ['25','00'],
running: 'no',
timerID: '',
}
}
// Starting from sratch without any Redux
class Clock extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.toggleStatus = this.toggleStatus.bind(this);
this.decCurrTime = this.decCurrTime.bind(this);
this.toggleRun = this.toggleRun.bind(this);
this.endOfStatus = this.endOfStatus.bind(this);
this.convertToArray = this.convertToArray.bind(this);
this.clearInt = this.clearInt.bind(this);
this.state = initState();
}
// Handle the click here - switch the action creator that is dispatched based on the id of the element
// Note that clicks are handled differently depending on whether the timer is running (state.running) - this is handled by the if statement in each case
handleClick(e) {
switch(e.target.id) {
case 'start_stop':
this.toggleRun();
break;
case 'break-decrement':
if (this.state.running === "no") {
this.updateBreak(-1);}
break;
case 'break-increment':
if (this.state.running === "no") {
this.updateBreak(1)}
break;
case 'session-decrement':
if (this.state.running === "no") {
this.updateSess(-1);
const newTime = [
String(this.state.sessTime-1).length == 1 ?
'0' + String(this.state.sessTime-1) :
String(this.state.sessTime-1),
'00'
]
this.updateCurrTime(newTime)
}
break;
case 'session-increment':
if (this.state.running === "no") {
this.updateSess(1);
const newTime = [
String(this.state.sessTime+1).length == 1 ?
'0' + String(this.state.sessTime+1) :
String(this.state.sessTime+1),
'00'
]
this.updateCurrTime(newTime)
}
break;
case 'reset':
this.clearInt();
this.setState(initState());
}
}
clearInt() {
clearInterval(this.state.timerID);
}
toggleRun() {
let running
if (this.state.running === 'yes') {
running = 'no'
this.clearInt();
} else {
running = 'yes'
this.decCurrTime(this.state.currTime);
}
this.setState({
running: running
})
}
toggleStatus() {
let status
if (this.state.status === 'session') {
status = 'break'
} else {
status = 'session'
}
this.setState({
status: status
})
}
updateBreak(dir) {
if (this.state.breakTime + dir < 0 ||
this.state.breakTime + dir > 60) {
return state;
}
this.setState({
breakTime: this.state.breakTime + dir
})
}
updateSess(dir) {
if (this.state.sessTime + dir < 0 ||
this.state.sessTime + dir > 60) {
return state;
}
this.setState({
sessTime: this.state.sessTime + dir
})
}
updateCurrTime(time) {
this.setState({
currTime: time
})
}
// Create a function that will decrease time by 1 second
decCurrTime(prevTime) {
const id = setInterval(() => {
switch (prevTime[1]) {
case '00':
prevTime[0] = prevTime[0] - 1;
prevTime[1] = 59;
break;
default:
prevTime[1] = prevTime[1] - 1;
break;
}
prevTime = prevTime.map((num) => {
return String(num).length == 1 ?
'0' + String(num) :
String(num)
})
this.updateCurrTime(prevTime);
},1000);
this.setState({
timerID: id
})
}
convertToArray(time) {
return [String(time).length == 1 ?
'0' + String(time) :
String(time),
'00']
}
endOfStatus(newTime) {
this.updateCurrTime(newTime);
this.clearInt();
this.decCurrTime(newTime);
this.toggleStatus();
}
render() {
if (this.state.currTime.join("") === "0000" && this.state.running === 'yes') {
const audio = document.getElementById("beep");
audio.play()
if (this.state.status === "session") {
const newTime =
this.convertToArray(this.state.breakTime);
this.endOfStatus(newTime);
} else {
const newTime =
this.convertToArray(this.state.sessTime);
this.endOfStatus(newTime);
}
}
return(
<div id="container-div">
<div id="navbar">
<h3 id="navbar-title">
Luke's Coding Projects
</h3>
<img id="navbar-img" src="https://www.creativefabrica.com/wp-content/uploads/2018/12/Computer-icon-by-rudezstudio-5-580x386.jpg" />
</div>
<div id="timer-div">
<div id="timer-title">
<h2>25 + 5 clock</h2>
<h4 id="subtitle">Manage your time with our easy to use clock</h4>
</div>
<div id="timer-labels">
<div id="break-div">
<h3 id="break-label">Break Length</h3>
<div id="break-controls">
<i id="break-decrement"
onClick={this.handleClick}
className="fa-solid fa-arrow-down icon button"></i>
<h3 id="break-length">{this.state.breakTime}</h3>
<i id="break-increment"
onClick={this.handleClick}
className="fa-solid fa-arrow-up icon button"></i>
</div>
</div>
<div id="sess-div">
<h3 id="session-label">Session Length</h3>
<div id="sess-controls">
<i id="session-decrement"
onClick={this.handleClick}
className="fa-solid fa-arrow-down icon button"></i>
<h3 id="session-length">{this.state.sessTime}</h3>
<i id="session-increment"
onClick={this.handleClick}
className="fa-solid fa-arrow-up icon button"></i>
</div>
</div>
</div>
<div id="timer">
<h2 id="timer-label">{this.state.status}</h2>
<h1 id="time-left">
{this.state.currTime.join(":")}
</h1>
<audio id="beep" src="https://www.soundjay.com/buttons/sounds/beep-01a.mp3"/>
</div>
<div id="timer-controls">
<i onClick={this.handleClick}
id="start_stop"
className="fa-solid fa-play button"></i>
<i className="fa fa-refresh button"
onClick={this.handleClick}
id="reset"></i>
</div>
</div>
</div>
)
}
}
// Render Clock to the DOM
ReactDOM.render(<Clock />,
document.getElementById("clock"));
At any rate, if you don’t get better help from someone else on this and can’t get past it, maybe consider opening a ticket in the Support category cuz it looks to me like it’s not an issue with you but an issue with the tests