Build a 25 + 5 Clock (codepen) - React 18.2.0

[SMBassett]

I’m trying to complete the freeCodeCamp project “Build a 25 + 5 Clock” but I have several issues that won’t pass their Test Suite. I’ve been trying to fix these issues for several days. I’d be grateful if someone could take a look at my project and offer some feedback.

I’m using React 18.2.0 and have seen recommendations in other threads to try React 17. So, I tried 17.0.2 and still failed all of the same tests.

---

RESOURCES:

1. Project requirements from freeCodeCamp: Build a 25 + 5 Clock
2. My codepen project: View my project code

---

FAILED TESTS:

I’ve inserted id="time-left" into a <div> as shown below, and can be seen on Line 153 of my codepen project. I tried using <span> instead of <div> but that didn’t fix the error.

<div className="clock-wrapper">

  <h1 id="timer-label">{currentTimer}</h1>
  <div id="time-left">{this.convertToTime(clockCount)}</div>
  
  <div className="flex">
    
    <button id="start_stop" onClick={this.handlePlayPause}>
      <i className={`fas fa-${isPlaying ? "pause" : "play"}`} />
    </button>

    <button id="reset" onClick={this.handleReset}>
      <i className="fas fa-sync" />
    </button>

  </div>

</div>

And I’ve ensured that the clock always displays the mm:ss format, for the Session and the Break sessions…as shown in this example…

Of the following #Timer tests, numbers 2-5 appear to have a common root issue that I haven’t been able to solve.

The Session Length and the Break Length work properly, in that they can be set from 1 to 60. They cannot be set <= 0 , nor can they be set > 60.

At this point, I don’t know what I should do to even begin to solve the #Timer issues? Is there a technique that I could use in the browser dev tools to narrow this down? My intuition leads me to believe that there is a problem with my order of operations which the freeCodeCamp Test Suite doesn’t like.

Thank you,
Stephen

[jeremy.a.gray]

Try logging the changes made from your handleLengthChange() function and run the tests again. You won’t see any output, but you should, which means that during the tests the increment/decrement buttons are being pressed and nothing is happening.

In general, if there is a react version problem on these tests, you’ll get different test failures from <=17 and >=18. The same failures indicate code problems.

[SMBassett]

Thanks Jeremy! This didn’t help me solve my particular issue…HOWEVER, learning how to console.log in React was super beneficial to me because I wasn’t aware that it required something different from standard JavaScript. A few minutes ago, it just occured to me that the freeCodeCamp is running their increment/decrement tests on the <button> element. I had placed my onClick event within an <i> element wrapped inside a <button> …as shown here… <button><i onClick={}></button>. That explains the fact that the clock was operating perfectly when I mouse-clicked on the increment/decrement ICONS, but failed the tests from freeCodeCamp which was engaging with the BUTTON. After I moved the onClick event to the <button> elements, all of my tests passed!

Failed Code

const SetTimer = (props) => {
  const category = props.title.toLowerCase();
  return (
    <div className="time-adjustment-wrapper">
      <h2 id={`${category}-label`}>{props.title} Length</h2>
      <div className="flex plus-minus-wrapper">
        <button id={`${category}-decrement`}>
          <i className="fas fa-minus" onClick={props.handleDecrease} />
        </button>
        <span id={`${category}-length`}>{props.count}</span>
        <button id={`${category}-increment`}>
          <i className="fas fa-plus" onClick={props.handleIncrease} />
        </button>
      </div>
    </div>
  );
};

Passing Code

const SetTimer = (props) => {
  const category = props.title.toLowerCase();
  return (
    <div className="time-adjustment-wrapper">
      <h2 id={`${category}-label`}>{props.title} Length</h2>
      <div className="flex plus-minus-wrapper">
        <button id={`${category}-decrement`} onClick={props.handleDecrease}>
          <i className="fas fa-minus" />
        </button>
        <span id={`${category}-length`}>{props.count}</span>
        <button id={`${category}-increment`} onClick={props.handleIncrease}>
          <i className="fas fa-plus" />
        </button>
      </div>
    </div>
  );
};