Hello! My Name is Gerardo. I’m stuck with the project n°5 25+5 timer. I try it at least 3 times from scratch, but even if i can get the project to function correctly (or at least, as long as i can tell) i can’t seem to pass the test.
The last time I tried it ([https://clever-brown-0d6c02.netlify.app/](here, hosted in Netlify)), I set myself to be as straight foward an simple as I (being a complete begginer) could: i use only React, with a single component, only using useState and useEffect hooks, with all in-line functions, so I can’t be messing it up with poor use of useReducer or Redux or anything… Still, the same result…
Below I copy the project’s silly code,
import { useRef, useState, useEffect } from 'react'
import reducer from './reducer'
import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io'
import { FaPlay, FaPause } from 'react-icons/fa'
import { VscDebugRestart } from 'react-icons/vsc'
function App() {
const [breakLength, setBreakLength] = useState(5)
const [sessionLength, setSessionLength] = useState(25)
const [clock, setClock] = useState(sessionLength * 60)
const [isClockRunning, setIsClockRunning] = useState(false)
const [isSessionCycle, setIsSessionCycle] = useState(true)
const [isCountdownFinished, setIsCountdownFinished] = useState(false)
const audioRef = useRef(null)
const formatTime = (time) => {
const min = Math.floor(time / 60)
const sec = Math.floor(time % 60)
return {
min: min < 10 ? `0${min}` : min,
sec: sec < 10 ? `0${sec}` : sec,
}
}
useEffect(() => {
if (clock === 0) {
setIsSessionCycle(!isSessionCycle)
setClock(isSessionCycle ? breakLength * 60 : sessionLength * 60)
setIsCountdownFinished(true)
audioRef.current.play()
const timeout = setTimeout(() => {
setIsCountdownFinished(false)
}, 2000)
}
if (isClockRunning && !isCountdownFinished) {
const clockInt = setInterval(() => {
setClock(clock - 1)
}, 1000)
return () => clearInterval(clockInt)
}
}, [isClockRunning, clock, isCountdownFinished])
return (
<section className='section-center'>
<h1 className='title'>25+5 Clock</h1>
<div className='clock-container'>
<div className='break-session-container'>
<article className='session-container'>
<h4 className='container-title' id='session-label'>
Session Lenght
</h4>
<div className='btn-container'>
<IoIosArrowDown
className='icon'
id='session-decrement'
onClick={() => {
if (!isClockRunning) {
sessionLength > 1 && setSessionLength(sessionLength - 1)
isSessionCycle &&
sessionLength > 1 &&
setClock((sessionLength - 1) * 60)
}
}}
/>
<p className='Session-time time' id='session-length'>
{sessionLength}
</p>
<IoIosArrowUp
className='icon'
id='session-increment'
onClick={() => {
if (!isClockRunning) {
sessionLength < 60 && setSessionLength(sessionLength + 1)
isSessionCycle &&
sessionLength < 60 &&
setClock((sessionLength + 1) * 60)
}
}}
/>
</div>
</article>
<article className='break-container'>
<h4 className='container-title' id='break-label'>
Break Length
</h4>
<div className='btn-container'>
<IoIosArrowDown
className='icon'
id='break-decrement'
onClick={() => {
if (!isClockRunning) {
breakLength > 1 && setBreakLength(breakLength - 1)
!isSessionCycle &&
breakLength > 1 &&
setClock((breakLength - 1) * 60)
}
}}
/>
<p className='break-time time' id='break-length'>
{breakLength}
</p>
<IoIosArrowUp
className='icon'
id='break-increment'
onClick={() => {
if (!isClockRunning) {
breakLength < 60 && setBreakLength(breakLength + 1)
!isSessionCycle &&
breakLength < 60 &&
setClock((breakLength + 1) * 60)
}
}}
/>
</div>
</article>
</div>
<article className={`display ${isCountdownFinished ? 'danger' : ''}`}>
<h4 className='display-title' id='timer-label'>
{isSessionCycle ? 'Session' : 'Break'}
</h4>
<h2 className='display-time' id='time-left'>
{formatTime(clock).min}:{formatTime(clock).sec}
</h2>
<audio
src='https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Gongs%20and%20Super%20Crashes/1364[kb]muted_gong.wav.mp3'
ref={audioRef}
id='beep'
></audio>
</article>
<div className='control-btns'>
<button
id='start_stop'
onClick={() => {
setIsClockRunning(!isClockRunning)
}}
>
{isClockRunning ? (
<FaPause className='icon' />
) : (
<FaPlay className='icon' />
)}
</button>
<VscDebugRestart
className='icon'
id='reset'
onClick={() => {
audioRef.current.pause()
audioRef.current.currentTime = 0
setBreakLength(5)
setSessionLength(25)
setClock(1500)
setIsClockRunning(false)
setIsSessionCycle(true)
setIsCountdownFinished(false)
}}
/>
</div>
</div>
</section>
)
}
export default App
I’m deeply sorry to crowd this forum with a topic like this, but i can’t seem to find my way to pass this. Can you spot and tell me where my error/s is/are?
Thanks so much!