Pomodoro Clock: failing Timer tests

JavaScript
1

Not sure why my code is failing these tests: 2. 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, 3. 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, 4. 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, 5. 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.

Clock (not finished)

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {break:5,
session:25}
  this.handleClick = this.handleClick.bind(this);
      }

handleClick(evt){
const id= evt.target.id;
let breakvar= this.state.break;
let sessionvar= this.state.session;
if (id==="break-increment" && breakvar<=59){
this.setState((state) => ({
  break: this.state.break +1}));}

else if (id==="break-decrement" && breakvar>0){
this.setState((state) => ({
  break: this.state.break -1}));}

else if (id==="session-increment" && sessionvar<=59){
this.setState((state) => ({
session: this.state.session +1}));}

else if(id==="session-decrement" && sessionvar>0){
this.setState((state) => ({
  session: this.state.session -1}));}

}



render() {
    return(
            <div id="container">
                <Display break={this.state.break} session={this.state.session}/>
                <p id="break-label">Break length</p>
                <Button onClick={this.handleClick} id="break-increment"/>
                <Button onClick={this.handleClick} id="break-decrement"/>
                <p id="session-label">Session length</p>
                <Button onClick={this.handleClick} id="session-increment" />
                <Button onClick={this.handleClick} id="session-decrement"/>
                <Button onClick={this.handleClick} id="start_stop"/>
                <Button onClick={this.handleClick} id="reset"/>
            </div>
)

}
}export default Clock

Display

const Display = (props) => {
  return (
    		<div>

    			<h1 id="break-length"> {props.break} </h1>
                <h2 id="session-length">{props.session} </h2>
                <p id="time-left">{props.session}</p>
                <p id="timer-label">Session</p>
    		</div>
)};
2

It would be easier if you get us a place to run and test the code, like codepen.

Just by looking, maybe the tests doesn’t like that you have some spaces around the number?

<h1 id="break-length"> {props.break} </h1>
1 Like
3

Thanks for the reply. Corrected the spaces but it still doesn´t work.

4

Corrected session-length too?

<h2 id="session-length">{props.session} </h2>

Is your code working fine? I mean, if you click those elements, break-length and session-length are being updated correctly? Also try to get us a codepen.

1 Like
5

I corrected both, yes. And yes, when I click the buttons the values increment and decrement properly.

6

So I tried here and I see that there’s an error before this one that you showed us. It’s possible that the tests that fails before are influencing the next ones. I’d recommend you to finish the full clock first and then we check it again :+1: