Hi everyone, hoping someone can help me. Not sure if there’s a problem with my code or a problem with the FCC test suite. Anyways, my app functions perfectly but for some reason when the test case runs to check if the audio plays @ timer = 00:00 the audio will not play. It plays every single other time except for when that test case runs. I’ve tried everything I can think of, so I’m hoping someone can point me in the right direction. Thanks!
const Increment = props => {
return (
<i
id={props.incId}
onClick={props.onClick}
class="fas fa-caret-up fa-lg">
</i>
);
}
const Decrement = props => {
return (
<i
id={props.decId}
onClick={props.onClick}
class="fas fa-caret-down fa-lg">
</i>
);
}
class SetTimer extends React.Component {
render() {
return (
<div id={this.props.areaId}>
<h3 id={this.props.headerId}>
{this.props.headerContent}
</h3>
<Increment
onClick={this.props.onIncClick}
incId={this.props.incId}/>
<h4 id={this.props.contentId}>
{this.props.min}
</h4>
<Decrement
onClick={this.props.onDecClick}
decId={this.props.decId}/>
</div>
);
}
}
const Button = props => {
return (
<i
id={props.buttonId}
className={props.className}
onClick={props.onClick}>
</i>
);
}
class Timer extends React.Component {
render() {
return (
<div id={this.props.areaId}>
<h3 id={this.props.headerId}>
{this.props.headerContent}
</h3>
<h4 id={this.props.contentId}>
{this.props.min > 9 ? this.props.min : "0" + this.props.min}
:
{this.props.sec > 9 ? this.props.sec : "0" + this.props.sec}
</h4>
<Button
buttonId={this.props.startButtonId}
className={this.props.startButtonIcon}
onClick={this.props.onStartClick}/>
<Button
buttonId={this.props.restartButtonId}
className={this.props.restartButtonIcon}
onClick={this.props.onRestartClick}/>
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
timerType: "Session",
breakMin: 5,
sessionMin: 25,
play: false,
timer: 1500,
}
this.handleSessionIncClick = this.handleSessionIncClick.bind(this);
this.handleSessionDecClick = this.handleSessionDecClick.bind(this);
this.handleBreakIncClick = this.handleBreakIncClick.bind(this);
this.handleBreakDecClick = this.handleBreakDecClick.bind(this);
this.handleStartClick = this.handleStartClick.bind(this);
this.handleRestartClick = this.handleRestartClick.bind(this);
}
componentDidMount() {
this.timer = setInterval(() => {
let newTimer = this.state.timer - 1;
if (this.state.play) {
if (newTimer > -1) {
this.setState({
timer: newTimer
});
} else if (this.state.timer === 0) {
this.audioBeep.play();
if (this.state.timerType === "Session") {
this.setState({
timerType: "Break",
timer: this.state.breakMin * 60,
});
} else if (this.state.timerType === "Break") {
this.setState({
timerType: "Session",
timer: this.state.sessionMin * 60,
});
}
}
}
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
handleSessionIncClick() {
if (this.state.sessionMin < 60) {
if (this.state.timerType === "Session") {
this.setState({
sessionMin: this.state.sessionMin += 1,
timer: this.state.timer += 60
});
} else if (this.state.timerType === "Break" && !this.state.play) {
this.setState({
sessionMin: this.state.sessionMin += 1,
});
}
}
}
handleSessionDecClick() {
if (this.state.sessionMin > 1) {
if (this.state.timerType === "Session") {
this.setState({
sessionMin: this.state.sessionMin -= 1,
timer: this.state.timer -= 60,
});
} else if (this.state.timerType = "Break" && !this.state.play) {
this.setState({
sessionMin: this.state.sessionMin -= 1,
});
}
}
}
handleBreakIncClick() {
if (this.state.breakMin < 60) {
if (this.state.timerType === "Break") {
this.setState({
breakMin: this.state.breakMin += 1,
timer: this.state.timer += 60,
});
} else if (this.state.timerType === "Session" && !this.state.play) {
this.setState({
breakMin: this.state.breakMin += 1,
});
}
}
}
handleBreakDecClick() {
if (this.state.breakMin > 1) {
if (this.state.timerType === "Break") {
this.setState({
breakMin: this.state.breakMin -= 1,
timer: this.state.timer -= 60,
});
} else if (this.state.timerType === "Session" && !this.state.play) {
this.setState({
breakMin: this.state.breakMin -= 1,
});
}
}
}
handleStartClick() {
this.setState({
play: !this.state.play
});
}
handleRestartClick() {
this.setState({
timerType: "Session",
breakMin: 5,
sessionMin: 25,
play: false,
timer: 1500
});
this.audioBeep.pause();
this.audioBeep.currentTime = 0;
}
render() {
return (
<div id="body">
<SetTimer
areaId="set-break-time"
headerId="break-label"
headerContent="Break Length"
contentId="break-length"
min={this.state.breakMin}
incId="break-increment"
decId="break-decrement"
onIncClick={this.handleBreakIncClick}
onDecClick={this.handleBreakDecClick}/>
<SetTimer
areaId="set-session-time"
headerId="session-label"
headerContent="Session Length"
contentId="session-length"
min={this.state.sessionMin}
incId="session-increment"
decId="session-decrement"
onIncClick={this.handleSessionIncClick}
onDecClick={this.handleSessionDecClick}/>
<Timer
areaId="timer-area"
headerId="timer-label"
headerContent={this.state.timerType}
contentId="time-left"
min={Math.floor(this.state.timer / 60)}
sec={this.state.timer - (Math.floor(this.state.timer / 60) * 60)}
startButtonId="start_stop"
startButtonIcon="fas fa-stopwatch fa-2x"
onStartClick={this.handleStartClick}
restartButtonId="reset"
restartButtonIcon="fas fa-sync fa-2x"
onRestartClick={this.handleRestartClick}/>
<audio id="beep" preload="auto"
src="https://goo.gl/65cBl1"
ref={(audio) => { this.audioBeep = audio; }} />
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);