Build a 25 + 5 Clock errors

Curriculum Help
1

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!

2

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

3

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.

4

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.

5

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>
  );
}