My calculator broke

const nums = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0];
const ops = ["/", "*", "-", "+", "="];
const ids = {
  7:'seven',
  8: 'eight',
  9: 'nine', 
  4: 'four',
  5: 'five',
  6: 'six',
  1: 'one',
  2: 'two',
  3: 'three',
  0: 'zero',
  "/": 'divide', 
  "*": 'multiply' , 
  "-": 'subtract',
  "+": 'add',
  "=": 'equals'
}
  

class App extends React.Component {
  state = {
    lastPressed: undefined,
    calc: "0",
    operation: undefined
  };

  handleClick = (e) => {
    const { calc, lastPressed } = this.state;
    const { innerText } = e.target;

    switch (innerText) {
      case "AC": {
        this.setState({
          calc: "0"
        });
        break;
      }
      case "=": {
        const evaluated = eval(calc);

        this.setState({
          calc: evaluated
        });
        break;
      }
      case ".": {
        const splitted = calc.split(/[\+\-\*\/]/);
        const last = splitted.slice(-1)[0];

        if (!last.includes(".")) {
          this.setState({
            calc: calc + "."
          });
        }
        break;
      }
      default: {
        let e = undefined;
        if (ops.includes(innerText)) {
          if (ops.includes(lastPressed) && innerText !== "-") {
            e = calc.slice(0, -3) + `${innerText} `;
          } else {
            e = `${calc}  ${innerText} `;
          }
        } else {
          e = calc === "0" ? innerText : calc + innerText;
        }

        this.setState({
          calc: e,
          currentNumber: e,
          lastPressed: innerText
        });
      }
    }
    this.setState({
      lastPressed: innerText
    });
  };

  render() {
    const { currentNumber, calc } = this.state;
    return (
      <div className="calculator">
        <p style={{ position: "absolute", top: 0, color: "white" }}>
          {JSON.stringify(this.state, null, 2)}
        </p>
        <div id="display" className="display">
          {calc}
        </div>
        <div className="nums-container">
          <button
            className="big-h dark-slategray ac"
            onClick={this.handleClick} id="clear"
          >
            AC
          </button>
          {nums.map((num) => (
            <button
              className={`dark-grey ${num === 0 && "big-h"}`}
              key={num}
              onClick={this.handleClick}
              id ={ids[num]}
            >
              {num}
            </button>
          ))}
          <button className="dark-grey" onClick={this.handleClick} id ="decimal">
            .
          </button>
        </div>
        <div className="ops-container">
          {ops.map((op) => (
            <button
              className="dark-slategray"
              key={ops}
              onClick={this.handleClick}
              id={ids[ops]
            >
              {ops}
            </button>
          ))}
          
          
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

I was moving my equals out of my array because equals aren’t an operation. and when I added the code for the button at the end of the code it didn’t populate in the result. So I removed the code and put the equals back where they worked. When I did that, it broke.


If anyone knows how to fix this without rewriting the code please help.

I am using win 10 and chrome.

Did you notice the error message you are seeing (Unterminated regular expression)? That is caused by not adding a closing } on line 120 (shown above).

That will resolve that issue but then you have more problems in that you have duplicate keys for the operators and equal sign. Look closely at the code you wrote below:

          {ops.map((op) => (
            <button
              className="dark-slategray"
              key={ops}
              onClick={this.handleClick}
              id={ids[ops]}
            >
              {ops}
            </button>

ops is the array but then you assign ops to each key of the map method. That is one problem. The second problem is value you are using to look up the id for id. ops is again not what you want here. The third problem is the value you are using to display as the text for the button. Again ops is not what you want here.

There are other problems with your calculator that you will still need to resolve but solve these first.

The button tag should close at after {op}. Why is that not working?

I am not understanding your question. Did you add the missing } on line 20?

1 Like

oh no. But now I see it. it is fixed and working now. But did you mention other problems?

Things may be fine but without having the CSS, I was having trouble clicking on certain buttons because there was text in the way.

EDIT: You are still failing 3 tests for your calculator, so if your goal is to pass the FCC tests, you still need to work out a few issues with the calculator’s logic.

1 Like

yep, I got those done too. Thanks for your help . :grin: