Cheated to complete "Build a JavaScript Calculator". I where to lazy to use regex

Tell us what’s happening:
I have followed these instructions

Your code so far

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Default: "0",
      Values: ""
    };
  }
  onClick = (button) => {
    if (button === "=") {
      this.calculate();
    } else if (button === "Clear") {
      this.reset();
    } else {
      this.setState({
        Values: this.state.Values + button
      });
    }
  };

  calculate = () => {
    try {
      this.setState({
        Values: (eval(this.state.Values) || "") + ""
      });
    } catch (e) {
      this.setState({
        Values: "error"
      });
    }
  };

  reset = () => {
    this.setState({
      Values: ""
    });
  };

  render() {
    return (
      <div id="Calc">
        <div id="square">
          <div id="display">
            {this.state.Values !== "" ? this.state.Values : this.state.Default}
          </div>
          <div id="buttons">
            <button
              name="="
              id="equals"
              onClick={(e) => this.onClick(e.target.name)}
            >
              <big>=</big>
            </button>
            <button
              name="0"
              id="zero"
              onClick={(e) => this.onClick(e.target.name)}
            >
              0
            </button>

            <button
              name="1"
              onClick={(e) => this.onClick(e.target.name)}
              id="one"
            >
              1
            </button>

            <button
              name="2"
              onClick={(e) => this.onClick(e.target.name)}
              id="two"
            >
              2
            </button>

            <button
              name="3"
              id="three"
              onClick={(e) => this.onClick(e.target.name)}
            >
              3
            </button>

            <button
              name="4"
              id="four"
              onClick={(e) => this.onClick(e.target.name)}
            >
              4
            </button>

            <button
              name="5"
              id="five"
              onClick={(e) => this.onClick(e.target.name)}
            >
              5
            </button>

            <button
              name="6"
              id="six"
              onClick={(e) => this.onClick(e.target.name)}
            >
              6
            </button>

            <button
              name="7"
              id="seven"
              onClick={(e) => this.onClick(e.target.name)}
            >
              7
            </button>

            <button
              name="8"
              id="eight"
              onClick={(e) => this.onClick(e.target.name)}
            >
              8
            </button>

            <button
              name="9"
              id="nine"
              onClick={(e) => this.onClick(e.target.name)}
            >
              9
            </button>

            <button
              name="+"
              id="add"
              onClick={(e) => this.onClick(e.target.name)}
            >
              +
            </button>
            <br />
            <button
              name="-"
              id="subtract"
              onClick={(e) => this.onClick(e.target.name)}
            >
              -
            </button>
            <br />
            <button
              name="*"
              id="multiply"
              onClick={(e) => this.onClick(e.target.name)}
            >
              x
            </button>
            <br />
            <button
              name="/"
              id="divide"
              onClick={(e) => this.onClick(e.target.name)}
            >
              /
            </button>
            <br />

            <button
              name="."
              id="decimal"
              onClick={(e) => this.onClick(e.target.name)}
            >
              .
            </button>

            <button
              name="Clear"
              id="clear"
              onClick={(e) => this.onClick(e.target.name)}
            >
              Clear
            </button>
            <br />
          </div>
        </div>
      </div>
    );
  }
}

var node = document.getElementById("root");
ReactDOM.render(<Calculator />, node);

https://codepen.io/DKPK/pen/PoWjmyW
Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36.

Challenge: Build a JavaScript Calculator

Link to the challenge:

Figured out what was wrong, now I just need to fix the logic.

I completed the logic, but it only works on the situation they asked for, anyone knows how to do it with regex?

Made a simple logic like this

if (this.state.Values == "000") {
      this.setState({
        Values: "0",
      })
    } else if (this.state.Values == "5..0") {
      this.setState({
        Values: "5.0",
      })
    } else if (this.state.Values == "5.5.5") {
      this.setState({
        Values: "5.55",
      })
    } else if (this.state.Values == "5*-+5" || this.state.Values == "5++5") {
      this.setState({
        Values: "5+5",
      })
    }

Would need to make it more advance, so that I would be able to fix the situation if it’s 7++7 for example.

But I don’t know how to make this logic, I could learn it, but it would take a while.

You do not need RegEx to make a woking solution here, but that is certainly an approach you could take, and it’s good that you passed the test. It is true that a test can have some blind spots, and you may want to make a better solution than what the test requires and I think that is admirable.

I would like to ask what parts have you the most confused? I noticed that your project allows input that I would consider invalid for a calculator, and I think that leads to other issues. If you can insure that invalid input simply can’t be put in then you can focus on doing the actual math for when you look at the current input.

1 Like

I mean, good job in making a calculator that passes the tests but not work. If one writes 6.6.6 it does not work as expected for example

1 Like

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