JS Calculator not passing test 7

1

I’m currently working on My Calculator Project, but it’s not passing test #7. But reading the requirements for test #7, my calculator does what it asks. I’m not sure what piece I’m missing here.

And yes, the calculator is not complete, so I’m not concerned about the equals not working, etc. I’m only concerned about test #7 currently.

I have my button clicks being handled by a switch statement. Here is the chunk that’s producing what feels like a working solution.

 case event.target.id === "clear":
        this.setState({
          readoutDisplay: "",
          inputDisplay: "0",
          decimalAdded: false,
          previousKeyEntered: "number"
        });
        break;

readoutDisplay is just the part that displays the formula as it is typed.
inputDisplay is the div with the id of “display”.

Thanks and let me know if my question is confusing. :smile:

I could also add that when deployed to Netlify - the calc passes only 7 tests.
Test 10 passes in my local IDE, but not deployed.

4

component:

export default function Buttons(props) {
  return (
    <div
      id={props.buttonID}
      onClick={props.handleClick}
      className={props.buttonType}
    >
      {props.buttonLabel}
    </div>
  );
}

And the render from my App.js

render() {
    return (
      <div id="wrapper">
        <div id="readout">
          <div id="display">{this.state.readoutDisplay}</div>
          <div id="inp">{this.state.inputDisplay}</div>
        </div>
        {DATA.map(i => (
          <Buttons
            buttonID={i.id}
            buttonLabel={i.buttonLabel}
            buttonValue={i.buttonValue}
            buttonType={i.buttonType}
            handleClick={this.processInput}
            key={Math.random()}
          />
        ))}
      </div>
    );
  }

Full Switch statement:

  processInput = event => {
    let keyEntered = event.target.innerHTML;
    let inp = this.state.inputDisplay + keyEntered;

    if (inp.charAt() === "0" && inp.charAt(1) !== ".") {
      inp = parseInt(inp, 10);
    }

    switch (true) {
      case event.target.className === "number":
        this.setState({
          inputDisplay: inp,
          readoutDisplay: this.state.readoutDisplay + keyEntered,
          previousKeyEntered: "number"
        });
        break;

      case event.target.className === "decimal" &&
        this.state.previousKeyEntered !== "decimal" &&
        this.state.decimalCleared === true:
        this.setState({
          inputDisplay: inp,
          readoutDisplay: this.state.readoutDisplay + keyEntered,
          previousKeyEntered: "decimal",
          decimalCleared: false
        });
        break;

      case event.target.className === "operation" &&
        this.state.previousKeyEntered !== "operation":
        this.setState({
          inputDisplay: keyEntered,
          readoutDisplay: this.state.readoutDisplay + keyEntered,
          previousKeyEntered: "operation",
          decimalCleared: true
        });

        break;

      case event.target.className === "equals":
        this.setState({
          decimalCleared: true
        });
        this.calculateResults(inp); // update state with calculation
        break;

      case event.target.id === "clear":
        this.setState({
          readoutDisplay: "",
          inputDisplay: "0",
          decimalCleared: true,
          previousKeyEntered: "number"
        });
        break;

      default:
        break;
    }
  };

The switch is ugly, I know. Lots of things to be fixed. But one thing at a time. :rofl:

5 
<div id="display">{this.state.readoutDisplay}</div>
          <div id="inp">{this.state.inputDisplay}</div>

I know this is a problem area, but even changing my switch statement to reset readoutDisplay to 0, effectively setting both divs to 0, has no effect. The test still fails.

7

Yeah, that’s what I was mentioning above. That makes sense but didn’t fit the behavior I wanted for my calc. Either way, changing the readout to 0 as well has no effect. The test still fails. I will update the repo with that effect if it helps.

9

Here is the link to the repo.

BTW, if you have comments about bad code, I’m not sensitive. I love hearing which parts of my code sucks so I can learn. :rofl:

14 
UNSAFE_componentWillUpdate() {
    if (this.state.reset) {
      this.setState(
        {
          readoutDisplay: "0",
          inputDisplay: "0",
          decimalCleared: true,
          previousKeyEntered: "number",
          reset: false
        },
        console.log("reset says: " + this.state.inputDisplay)
      );
    }
  }

This successfully passes test #7 but only when the test is run a second time after the page has been reloaded.

15

I saw this post some time ago but the forum had log in issues at the time so I was not able to reply.

If I remember correctly I fixed it by changing the key value on the Button component to just use the id (i.id) instead of Math.random(). I have not re-tested this again.

Edit: some clarification, i mean in the map inside the App component

{DATA.map(i => (
  <Buttons
    buttonID={i.id}
    buttonLabel={i.buttonLabel}
    buttonValue={i.buttonValue}
    buttonType={i.buttonType}
    handleClick={this.processInput}
    key={i.id}
  />
))}
1 Like
16

I have made this change but I have issues with my expression evaluation which is now preventing the tests from even fully running. So in that regard, this specific problem may be fixed - I’m just not sure. Still working/struggling on it. :crazy_face:

17

I completely removed the expression parser that I had implemented and it now passes 11 tests. I’m still not entirely sure what the problem was, but as far as this thread is concerned, I guess it’s “solved”. :laughing: Thanks for all the help.