Build a 25 + 5 Clock errors

Hi There FCC community!

I’m struglling to pass some test on the last project of the FCC frontend libraries certifications and to be more percise, i’m failing these tests:

Content:

  1. I can see an element with corresponding id=“time-left”. NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).

Timer:

  1. When I click the element with the id of “break-decrement”, the value within id=“break-length” decrements by a value of 1, and I can see the updated value.

  2. When I click the element with the id of “break-increment”, the value within id=“break-length” increments by a value of 1, and I can see the updated value.

  3. When I click the element with the id of “session-decrement”, the value within id=“session-length” decrements by a value of 1, and I can see the updated value.

  4. When I click the element with the id of “session-increment”, the value within id=“session-length” increments by a value of 1, and I can see the updated value.

  5. I should not be able to set a session or break length to <= 0.

  6. I should not be able to set a session or break length to > 60.

  7. When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the id=“session-length” element.

But the problem is that I tested my app functionality manually and it seems to be passing all the user stories. Can you please assist?

Here is my code:

25 + 5 project on replit

Thank you in advance!

Can you tell me what does running this program manually mean or where you`re doing this. Are you pushing this to the web?

I mean checked each point and every test and the app has the requesirments of this test.
For example this error:

Content:

  1. I can see an element with corresponding id=“time-left”. NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).

In my code there is an element with this id and it has the format of the time as 25:00 but i don’t know why the test fails.

I forked your code to my replit, I have the same errors, what part of your code has the min:sec element I was unable to find it. Just copy and paste.

Thank you so much for trying to help! I really appreciate it!
The code of this error is in the Timer component (Timer.jsx)

import { useContext } from "react";
import { AppContext } from "../GlobalContext";

export default function Timer() {
  const { clockState } = useContext(AppContext);

  const timeLength =
    clockState.currentTimer === "Session"
      ? clockState.sessionMinutes
      : clockState.breakMinutes;

  const formattedTimeLength =
    timeLength.toString().length < 2 ? `0${timeLength}` : timeLength;

  const seconds =
    clockState.currentTimer === "Session"
      ? clockState.sessionSeconds
      : clockState.breakSeconds;

  const formattedSeconds =
    seconds.toString().length < 2 ? `0${seconds}` : seconds;

  return (
    <div className="timer">
      <h3 id="timer-label">{clockState.currentTimer}</h3>
      <h2 id="time-left">
        {formattedTimeLength}:{formattedSeconds}
      </h2>
    </div>
  );
}