Pomodoro, Failing #Content 8, but passing Timer#8

just trying to start with the UI first,
I don’t understand why it’s failing #Content number 8

          {/* fcc Elements */}
          <div>

            {/* 01 */}
            <button id="break-label">BreakLabel</button>
            {/* 02 */}
            <button id="session-label">sessionLabel</button>
            {/* 03 */}
            <button id="break-decrement">break-decrement</button>
            {/* 03 */}
            <button id="session-decrement">session-decrement</button>
            {/* 04 */}
            <button id="break-increment">break-increament</button>
            {/* 04 */}
            <button id="session-increment">session-increment</button>
            {/* 05 */}
            <button
              id="break-length"
            // value="5"
            >5</button>
            {/* 06 */}
            <button id="session-length">25</button>
            {/* 07 */}
            <button id="timer-label">session?</button>
            {/* 08 */}
            {/* <button id="time-left">25:00</button> */}
            {/* 08 */}
            <div id="time-left">25:00</div>
            {/* 09 */}
            <button id="start_stop">start/stop</button>
            {/* 10 */}
            <button id="reset">reset</button>

          </div>

Ironically, there’s no reason it should be passing #Timer number 8… ?!

We are unlikely to be able to help you without looking at a live version of the project. You can use something like CodeSandbox or Codepen.

Following the advice under Thinking In React
I’ve built out my UI first, with no real functionality to anything yet.

Now that you have your component hierarchy, it’s time to implement your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It’s best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We’ll see why.

Passing 12 out of 29, for the Pomodor at FreeCodeCamp.com

I don’t understand why it’s failing on number 8 under #Content. I have the id="time-left" and the text hardcoded to 25:00… unless it means the value="25:00", but that’s not the way it’s been worded on the other challenges.

repo
live demo, be sure to use the NavBar to get to quote
use the hamburger menu on the top left and select Random Quote Machine to run the test suite, they say it’s designed for Chrome and may encounter bugs in other browsers.

Pomodoro.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap';

export class Pomodoro extends Component {

  render() {
    return (
      <div>
        <ToggleButtonGroup type="radio" name="options" defaultValue={22}>
          <ToggleButton value={5} variant="warning" id="time-left"><h1>25:00</h1></ToggleButton>
          <ToggleButton value={6} variant="warning" id="session-length">25</ToggleButton>
        </ToggleButtonGroup>
        <br></br>
        <ToggleButtonGroup type="radio" name="options">
          <ToggleButton value={1} variant="warning" id="break-label">Break</ToggleButton>
          <span> _ </span>
          <ToggleButton value={3} variant="warning" id="session-label">Work</ToggleButton>
        </ToggleButtonGroup>
        <br></br>
        <ToggleButtonGroup type="radio" name="options">
          <ToggleButton value={2} variant="warning" id="break-length">5</ToggleButton>
          <span> _ </span>
          <ToggleButton value={4} variant="warning" id="timer-label">25</ToggleButton>
        </ToggleButtonGroup>
        <br></br>
        <ToggleButtonGroup type="radio" name="options">
          <ToggleButton value={7} variant="danger" id="break-decrement">- Break</ToggleButton>
          <ToggleButton value={8} variant="danger" id="session-decrement">- Work</ToggleButton>
        </ToggleButtonGroup>
        <br></br>
        <ToggleButtonGroup type="radio" name="options">
          <ToggleButton value={9} variant="success" id="break-increment">+ Break</ToggleButton>
          <ToggleButton value={10} variant="success" id="session-increment">+ Work</ToggleButton>
        </ToggleButtonGroup>
        <br></br>
        <ToggleButtonGroup type="radio" name="options">
          <ToggleButton value={11} id="start_stop">Start/Stop</ToggleButton>
          <ToggleButton value={12} id="reset">Reset</ToggleButton>
        </ToggleButtonGroup>
        <figure>
          {/* <figcaption>Listen to the T-Rex:</figcaption> */}
          <audio
            id="beep"
            controls
            src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav">
            Your browser does not support the
            <code>audio</code> element.
        </audio>
        </figure>
        {/* <audio
          id="beep"
          preload="auto"
          ref={(audio) => {
            this.audioBeep = audio;
          }}
          controls
          src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav"
        /> */}
      </div>
    );
  }
}

export default Pomodoro;

Screenshot_2020-12-27 fccTempLate

If you read the second line of the error message, it says:

time-left is not formatted correctly: expected '25' to equal '60'

This is because the tests tried to increase the session length to 60 minutes, and expected that the display always shows the correct time, not just a hard-coded start value.

Once you get the functionality for the other tests running, this test will pass as well.

2 Likes