Now I’m working on my version of 25 + 5 Clock, this is my version on codepen: https://codepen.io/faber_g/pen/WNJOOwp
And this is example from Freecodecamp and tasks to complete: https://codepen.io/freeCodeCamp/full/XpKrrW (example)
And this is my code:
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {
seconds: 0,
breakMinutes: 5,
sessionMinutes: 25,
timerState: false,
timerAmount: 1500,
timerName: 'Session'
};
this.decrementBreak = this.decrementBreak.bind(this);
this.incrementBreak = this.incrementBreak.bind(this);
this.decrementSession = this.decrementSession.bind(this);
this.incrementSession = this.incrementSession.bind(this);
this.reset = this.reset.bind(this);
this.intervalSet = this.intervalSet.bind(this);
this.intervalClear = this.intervalClear.bind(this);
this.clockInfo = this.clockInfo.bind(this);
this.playSound = this.playSound.bind(this);
/**this.changeName = this.changeName.bind(this);**/
}
/**changeName() {
this.setState(state => ({
timerAmount: this.state.breakMinutes * 60,
timerName: 'Break'
}));
}**/
playSound() {
if (this.state.timerAmount === 0) {
let audio = document.getElementById('sound')
audio.play();
}
}
clockInfo() {
if (this.state.timerAmount < 0) {
return "00:00"
} else
if (this.state.timerAmount === 0 && this.state.timerName === 'Session') {
this.playSound();
this.setState(state => ({
timerAmount: this.state.breakMinutes * 60,
timerName: 'Break'
}));
}
else if (this.state.timerAmount === 0 && this.state.timerName === 'Break') {
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;
}
}
intervalSet() {
this.interval = setInterval(() => this.tick(), 1000);
this.setState(state => ({
timerState: true
}));
}
intervalClear() {
clearInterval(this.interval);
this.setState(state => ({
timerState: false
}));
}
decrementBreak() {
if (this.state.timerState === false && this.state.timerName === 'Session') {
this.setState(state => ({
breakMinutes: state.breakMinutes - 1,
}));
} else if (this.state.timerState === false && this.state.timerName === 'Break') {
this.setState(state => ({
breakMinutes: state.breakMinutes - 1,
timerAmount: state.breakMinutes * 60 - 60
}));
}
}
incrementBreak() {
if (this.state.timerState === false && this.state.timerName === 'Session') {
this.setState(state => ({
breakMinutes: state.breakMinutes + 1,
}));
} else if (this.state.timerState === false && this.state.timerName === 'Break') {
this.setState(state => ({
breakMinutes: state.breakMinutes + 1,
timerAmount: state.breakMinutes * 60 + 60
}));
}
}
decrementSession() {
if (this.state.timerState === false && this.state.timerName === 'Session') {
this.setState(state => ({
sessionMinutes: state.sessionMinutes - 1,
timerAmount: state.sessionMinutes * 60 - 60
}));
} else if (this.state.timerState === false && this.state.timerName === 'Break') {
this.setState(state => ({
sessionMinutes: state.sessionMinutes - 1,
}));
}
}
incrementSession() {
if (this.state.timerState === false && this.state.timerName === 'Session') {
this.setState(state => ({
sessionMinutes: state.sessionMinutes + 1,
timerAmount: state.sessionMinutes * 60 + 60
}));
} else if (this.state.timerState === false && this.state.timerName === 'Break') {
this.setState(state => ({
sessionMinutes: state.sessionMinutes + 1,
}));
}
}
soundPlay(time) {
time = this.state.timerAmount
if (this.state.timerAmount === 0) {
this.audioBeep.play();
}
}
reset() {
clearInterval(this.interval)
this.setState(state => ({
sessionMinutes: 25,
breakMinutes: 5,
seconds: 0,
timerState: false,
timerAmount: 1500,
timerName: 'Session'
}));
}
tick() {
this.setState(state => ({
timerAmount: state.timerAmount - 1
}));
}
componentDidMount() {
}
componentWillUnmount() {
}
render() {
return (
<div id="timer-conteiner">
<h1 id="header-text">25 + 5 Clock</h1>
<div id="break-conteiner">
<div id="break-label">Break Length</div>
<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>
<div id="break-length">{this.state.breakMinutes}</div>
<button id="break-increment" onClick={this.state.breakMinutes < 60 ? this.incrementBreak : this.state.breakMinutes}><i className="fa fa-plus-circle fa-lg" aria-hidden="true"></i></button>
</div>
<div id="session-conteiner">
<div id="session-label">Session Length</div>
<button id="session-decrement" onClick={this.state.sessionMinutes > 1 ? this.decrementSession : this.state.sessionMinutes}><i className="fa fa-minus-circle fa-lg" aria-hidden="true"></i></button>
<div id="session-length">{this.state.sessionMinutes}</div>
<button id="session-increment" onClick={this.state.sessionMinutes < 60 ? this.incrementSession : this.state.sessionMinutes}><i className="fa fa-plus-circle fa-lg" aria-hidden="true"></i></button>
</div>
<div id="timer">
<div id="timer-label">{this.state.timerName}</div>
<div id="time-left" style={this.state.timerAmount < 60 ? { color: 'red' } : { color: 'black' }}>{this.clockInfo()}</div>
</div>
<div id="control-timer">
<div id="start_stop"><button onClick={!this.state.timerState ? this.intervalSet : this.intervalClear}><i className="fa fa-play-circle fa-lg" aria-hidden="true"></i><i class="fa fa-pause-circle fa-lg" aria-hidden="true"></i></button></div>
<div><button id="reset" onClick={this.reset}><i class="fa fa-refresh fa-lg" aria-hidden="true"></i></button></div>
</div>
<audio className="clip" id="sound" preload="auto" src="https://od.lk/s/MTFfMzQzMTcxMTlf/beep-18%20%281%20sec%29.mp3">
</audio>
</div>
);
}
}
ReactDOM.render(
<Timer />,
document.getElementById('timer')
);
For now timer can pass 11 tests. Timer is working, I checked with example and functions is the same.
This is test run location, you can find it when you open codepen link, in left up corner you will see three green lines, click on it and widow with test run will pop up:
I am definitely doing something wrong. Maybe I misunderstand the main task.
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.
Can you take a look and maybe give me some hints? Thank you!