Front End Development Libraries Projects - Build a 25 + 5 Clock

JavaScript
1

Tell us what’s happening:

Whenever I run tests, at least one user story fails. If my audio plays at 00:00, my “Break” text apparently doesnt show at 00:00. When my “Break” does show at 00:00, apparently my audio doesn’t play at 00:00. I’ve tried so many things, all either get one or the other to work but not both. I need help please.

Your code so far

import React, { useState, useEffect, useRef, useCallback } from 'react';
import './App.css';
import { ArrowUp, ArrowDown, Play, Shuffle } from 'lucide-react';

function App() {
  const [breakTime, setBreakTime] = useState(5);
  const [sessionTime, setSessionTime] = useState(25);
  const [sessionMin, setSessionMin] = useState(25);
  const [sessionSec, setSessionSec] = useState(0);
  const [playPause, setPlayPause] = useState(false);
  const [displayLabel, setDisplayLabel] = useState("Session");
  const audioRef = useRef(null);

 

  useEffect(() => {
    if (playPause) {
      const interval = setInterval(() => {
        if (sessionSec > 0) {
          setSessionSec(prevSec => prevSec - 1);
        } else if (sessionMin > 0) {
          setSessionMin(prevMin => prevMin - 1);
          setSessionSec(59);
        } else if (sessionMin <= 0 && sessionSec <= 0) {

            if (audioRef.current) {
              audioRef.current.currentTime = 0;
              audioRef.current.play();
            }
            if (displayLabel === "Break") {
              setDisplayLabel("Session");
              setSessionMin(sessionTime);
              setSessionSec(0);
              
            }
            if (displayLabel === "Session") {
              setDisplayLabel("Break");
              setSessionMin(breakTime);
              setSessionSec(0);
            }
      
        } else {
          clearInterval(interval);
        }
      }, 1000);
      return () => clearInterval(interval);
    }
  }, [playPause, sessionMin, sessionSec]);

  const handleBreakInc = () => {
    if (breakTime === 60) {
      return;
    } else {
      setBreakTime(prevState => prevState + 1);
    }
  };

  const handleBreakDec = () => {
    if (breakTime === 1) {
      return;
    } else {
      setBreakTime(prevState => prevState - 1);
    }
  };

  const handleSessionInc = () => {
    if (sessionTime === 60) {
      return;
    } else {
      setSessionTime(prevState => prevState + 1);
      setSessionMin(prevState => prevState + 1);
    }
  };

  const handleSessionDec = () => {
    if (sessionTime === 1) {
      return;
    } else {
      setSessionTime(prevState => prevState - 1);
      setSessionMin(prevState => prevState - 1);
    }
  };

  const togglePlayPause = () => {
    setPlayPause(prevState => !prevState);
  };

  const reset = () => {
    setBreakTime(5);
    setSessionTime(25);
    setSessionMin(25);
    setSessionSec(0);
    setPlayPause(false);
    setDisplayLabel("Session");
    if (audioRef.current) {
      audioRef.current.pause();
      audioRef.current.currentTime = 0;
    }
  };

  return (
    <div className="whole-thing">
      <h2>25 + 5 Clock</h2>
      <div className="label-holder">
        <div className="break-holder">
          <div id="arrow-holder">
            <div id="break-increment" onClick={handleBreakInc}><ArrowUp size={40} /></div>
            <div id="break-length">{breakTime}</div>
            <div id="break-decrement" onClick={handleBreakDec}><ArrowDown size={40} /></div>
          </div>
          <div id="break-label">Break Length</div>
        </div>
        <div className="session-holder">
          <div id="arrow-holder">
            <div id="session-increment" onClick={handleSessionInc}><ArrowUp size={40} /></div>
            <div id="session-length">{sessionTime}</div>
            <div id="session-decrement" onClick={handleSessionDec}><ArrowDown size={40} /></div>
          </div>
          <div id="session-label">Session Length</div>
        </div>
      </div>
      <div className="timer">
        <div id="timer-label">{displayLabel}</div>
        <div id="time-left">{`${sessionMin < 10 ? '0' : ''}${sessionMin}:${sessionSec < 10 ? '0' : ''}${sessionSec}`}</div>
        <div id="start_stop" onClick={togglePlayPause}><Play size={40} /></div>
        <div id="reset" onClick={reset}><Shuffle size={40} /></div>
      </div>
      <audio id="beep" ref={audioRef} src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav" />
    </div>
  );
}

export default App;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Front End Development Libraries Projects - Build a 25 + 5 Clock

2

@kaponolizama I think it is a little bit hard to follow your code due to the format. Could you reformat it and place it inside a code block for better readability?

2 Likes
3

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
4

Hey thanks for replying. I ended up figuring it out after sleeping on it and coming back to it. I just had to slightly re-order how some of the setStates were being called and set the alarm to initiate when that state was at 00:01 so that by the time the state changed to 00:00 the alarm would go off. Thank you!

5

Ok will do for the future. Thanks!

6

@kaponolizama I am glad that you were able to solve it. Great job!

1 Like