Tell us what’s happening:
Describe your issue in detail here.
I wrote the code for the 25+5 clock project and in the browser it behaves according to the requirements. First it passed on 25/29 tests and then I fixed a tiny issue and then it first passes on 27/29 tests and then suddenly jumps to 16/29 tests and stops. There are a lot of tests that require some behaviour, but it is hard to find out what they expect.
Your code so far
function App() {
const [breakTime, setBreakTime] = React.useState(5 * 60);
const [sessionTime, setSessionTime] = React.useState(25 * 60)
const [displayTime, setDisplayTime] = React.useState(25 * 60);
const [timerOn, setTimerOn] = React.useState(false);
const [onBreak, setOnbreak] = React.useState(false);
const [workSound, setWorkSound] = React.useState(new Audio('./wolf.mp3'));
const [breakSound, setBreakSound] = React.useState(new Audio('./leopard.mp3'));
const log = (...args) => {
console.log(...args);
}
const playBreakSound = () => {
breakSound.currentTime = 0;
breakSound.play();
}
const playWorkSound = () => {
workSound.currentTime = 0;
workSound.play();
}
const formatTime = (time, type) => {
let minutes = Math.floor(time / 60);
if (type == 'sec') {
let seconds = time % 60;
return (
(minutes < 10 ? "0" + minutes : minutes) +
":" +
(seconds < 10 ? "0" + seconds : seconds)
);
} else {
return minutes;
}
}
const capitalise = (str) => {
return str.charAt(0).toUpperCase() + str.slice(1);
}
const changeTime = (change, type) => {
if (type == "break") {
if (breakTime <= 60 && change < 0 || breakTime >= 60 * 60 && change > 0) {
return;
}
if (!timerOn) {
setBreakTime(prev => prev + change);
if (onBreak) {
setDisplayTime(() => breakTime + change);
}
}
} else if (type == "session") {
if (sessionTime <= 60 && change < 0 || sessionTime >= 60 * 60 && change > 0) {
return;
}
if (!timerOn) {
setSessionTime(prev => prev + change);
if (!onBreak) {
setDisplayTime(() => sessionTime + change);
}
}
}
}
const play = () => {
let second = 1000;
let date = new Date().getTime();
let nextDate = Math.round(new Date().getTime() + second);
let onBreakVariable = onBreak;
if (!timerOn) {
let interval = setInterval(() => {
date = new Date().getTime();
if (date > nextDate) {
setDisplayTime(prev => {
if (prev <= 0 && !onBreakVariable) {
playBreakSound();
onBreakVariable = true;
setOnbreak(true);
return breakTime;
} else if (prev <= 0 && onBreakVariable) {
playWorkSound();
onBreakVariable = false;
setOnbreak(false);
return sessionTime;
}
return prev - 1;
});
nextDate += second;
}
}, 30)
localStorage.clear();
localStorage.setItem('interval-id', interval);
} else {
clearInterval(localStorage.getItem('interval-id'));
}
setTimerOn(prev => !prev);
}
const reset = () => {
if (timerOn) {
play();
}
setDisplayTime(25 * 60);
setBreakTime(5 * 60);
setSessionTime(25 * 60);
}
return (
<div className="container">
<h1 className="title">clock</h1>
<div className="length-container">
<Length
title={"break"}
type={"break"}
time={breakTime}
changeTime={changeTime}
formatTime={formatTime}
capitalise={capitalise}
/>
<Length
title={"session"}
type={"session"}
time={sessionTime}
changeTime={changeTime}
formatTime={formatTime}
capitalise={capitalise}
/>
</div>
<div className="time-container">
<div className="timer-wrapper">
<h2 className="label" id="timer-label">{onBreak ? "Break" : "Session"}</h2>
<h1 className="time" id="time time-left">{formatTime(displayTime, 'sec')}</h1>
<div className="timer">
<button className="btn btn-small deep-purple lighten2" onClick={() => play()}>
{timerOn
? (<i className="material-icons" id="start_top">pause_circle_filled</i>)
: (<i className="material-icons" id="start_stop">play_circle_filled</i>)
}
</button>
<button className="btn btn-small deep-purple lighten2" onClick={() => reset()}>
<i className="material-icons" id="reset">autorenew</i>
</button>
<audio id="beep"></audio>
</div>
</div>
</div>
</div>
)
}
function Length({ title, changeTime, type, time, formatTime, capitalise }) {
return (
<div className={`${title}-wrapper`}>
<h2 className="label" id={`${title}-label`}>{capitalise(title)} Length</h2>
<div className="time-sets">
<button className="btn btn-small deep-purple lighten2" onClick={() => changeTime(-60, type)}>
<i className="material-icons" id={`${title}-decrement`}>arrow_downward</i>
</button>
<h4 className="time" id={`${title}-length`}>{formatTime(time)}</h4>
<button className="btn btn-small deep-purple lighten2" onClick={() => changeTime(+60, type)}>
<i className="material-icons" id={`${title}-increment`}>arrow_upward</i>
</button>
</div>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
link to codepen: https://codepen.io/danmikes/pen/vYmJdOd
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36
Challenge: Build a 25 + 5 Clock
Link to the challenge: