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.

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

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

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.