Front End Libraries Projects - Build a Pomodoro Clock cant pass test #8

JavaScript
1

i cant pass this test

  • User Story #8: 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)
.class LengthController extends React.Component{
  render(){
    return(
      <div id={this.props.Id}>
         {this.props.text}
        <div id={this.props.IdInc}></div>
        <div id={this.props.IdDec}></div>
        <div id={this.props.IdLen}>{this.props.display}</div>
      </div>
    )
  }
}

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      break_length: 5,
      session_length: 25,
    }
    this.handleTimer = this.handleTimer.bind(this)
  } 
  
    handleTimer(){
    var temp =  this.state.session_length * 60;
    var minutes = Math.floor(temp / 60 );
    var secondes = temp - minutes * 60 ;
    minutes = minutes < 10 ? '0'+minutes : minutes
    secondes = secondes < 10 ? '0'+secondes : secondes
    return minutes+":"+secondes
   
  }
  
handleReset = () =>{
  this.setState({
    break_length: 5,
    session_length: 25,
  });
  this.handleTimer()
  console.log("reset")
}

  render(){
  
    return(
      <div>
      <LengthController
        Id="break-label" 
       IdDec="break-decrement" 
        IdInc="break-increment"
        text="Break Length"
        IdLen="break-length"
        display={this.state.break_length}
        />
      <LengthController 
         Id="session-label"
         IdDec="session-decrement" 
        IdInc="session-increment"
         text="Session Length"
         IdLen="session-length"
         display={this.state.session_length}
        />
        <div  id="timer-label">
          Session
          <div id="time-left">{this.handleTimer()}</div>
        </div>
        <div id="controle">
          <div  id="start_stop">Stop</div>
          <div  id="reset" onClick={this.handleReset} >Reset</div>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />,document.getElementById('main'));
2

I’m thinking that maybe you don’t need this line?

    minutes = minutes < 10 ? '0'+minutes : minutes

just a guess. I haven’t read all the requirements for the project.

EDIT: nevermind, that line is fine.

3

Is the handleReset working? because you don’t have the

    this.handleReset = this.handleReset.bind(this)

and the method is not defined like the handleTimer is.

Sorry, that’s not really adressing your problem.

4

everything is working fine i just need to fix test 8

5

I believe the time-left should be the outer div

6

no time-left is the inner div , problem fixed