Trouble with my calculator

const App = () => (
  <div className="calculator">
    <div className="display" id="display">
      0
    </div>
    <Buttons />
  </div>
);

class Buttons extends React.Component {
  constructor(props) {
    super(props);
    this.count = "";
  }
  handleClick = (event) => {
    const digit = event.target.innerText;
    const actions = {
      Delete: () => {
        this.count = "";
        document.getElementById("display").innerText = 0;
      },
      "=": () => {
        const result = eval(this.count);
        this.count = result;
        document.getElementById("display").innerText = result;
      },
      ".": () => {
        if (
          !this.count
            .split(/[+\-*/]/)
            .slice(-1)[0]
            .includes(".")
        ) {
          this.count += digit;
          document.getElementById("display").innerText = this.count;
        }
      },
      "+": () => {
        if (/[+\-*/]$/.test(this.count)) {
          this.count = this.count.replace(/[+*/]{1,}$|-/, digit);
          document.getElementById("display").innerText = this.count;
        } else {
          this.count += digit;
          document.getElementById("display").innerText = this.count;
        }
      },
      "-": () => {
        const lastChar = this.count.slice(-1);
        const oldChar = this.count.slice(-2);
        if(/[--]{2}$/.test(this.count)){
          document.getElementById("display").innerText = this.count;
        }else{
          this.count += digit;
        document.getElementById("display").innerText = this.count;
        }
      },
      "*": () => {
        if (/[+\-*/]$/.test(this.count)) {
          this.count = this.count.replace(/[+*/]{1,}$|-/, digit);
          document.getElementById("display").innerText = this.count;
        } else {
          this.count += digit;
          document.getElementById("display").innerText = this.count;
        }
      },
      "/": () => {
        if (/[+\-*/]$/.test(this.count)) {
          this.count = this.count.replace(/[+*/]{1,}$|-/, digit);

          document.getElementById("display").innerText = this.count;
        } else {
          this.count += digit;
          document.getElementById("display").innerText = this.count;
        }
      },
      _: () => {
        if (
          digit !== "0" ||
          (digit === "0" &&
            this.count !== "" )
        ) {
          this.count += digit;
          document.getElementById("display").innerText = this.count;
        }
      }
    };
    (actions[digit] || actions._)();
  };

  render() {
    const divs = {
      div2: ["clear", "Delete"],
      div3: {
        one: 1,
        two: 2,
        three: 3,
        four: 4,
        five: 5,
        six: 6,
        seven: 7,
        eight: 8,
        nine: 9
      },
      div4: ["equals", "="],
      div5: ["decimal", "."],
      div6: ["zero", 0],
      div7: ["add", "+"],
      div8: ["subtract", "-"],
      div9: ["multiply", "*"],
      div10: ["divide", "/"]
    };

    return Object.entries(divs).map(([className, values]) => {
      return (
        <div className={className}>
          {Array.isArray(values) ? (
            <button id={values[0]} onClick={this.handleClick}>
              {values[1]}
            </button>
          ) : (
            Object.entries(values).map(([key, value]) => {
              return (
                <button id={key} onClick={this.handleClick}>
                  {value}
                </button>
              );
            })
          )}
        </div>
      );
    });
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

hi this is my code for the calculator challenge
everything works properly except that when i put two β€˜-’ signs it won’t work and this test won’t pass
13. If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (-) sign.
The sequence β€œ5 * - + 5” = should produce an output of β€œ10” : expected β€˜25’ to equal β€˜10’
AssertionError: The sequence β€œ5 * - + 5” = should produce an output of β€œ10” : expected β€˜25’ to equal β€˜10’
at Proxy.c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:525:1889)
at Proxy.u (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:407:130)
at n.strictEqual (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:550:655)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:178252
at l (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79440)
at Generator._invoke (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79193)
at Generator.next (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79799)
at r (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1054)
at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1265)
i really don’ t know how to fix it

Try logging from where you handle the - button to see what exactly is happening as you try using multiple - signs or running the tests. For further assistance, post a link to your project on codepen.

Additionally, you’re mixing a lot of direct DOM manipulation with React. That’s generally a bad idea since React is trying to control the DOM itself.

1 Like

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