Please help me pass test 12 in javascript calculator

1

I am using the following code block (which handles my click event) to pass tests 10 and 11. But i can see that my logic restricts me from passing test 12. Please help me think this through

const handleInput = (val) => {
    if (!(calc.input.includes(".") && val === ".")) {
      if (calc.input === "0") {
        setCalc((calc.input = ""));
      } else if (calc.input.match(/(^0)\1{2,}/)) {
        setCalc(calc.input.replace(/(^0)\1{2,}/g, "0"));
      }
      setCalc({ input: calc.input + val });
    }
  };

This is the link to my code: https://codesandbox.io/s/calculator-hrk8d?file=/src/App.js:466-789

2

yet you agree that your code is doing exactly what you would expect it to do. you are not refreshing calc.input after an operand.

3

I stated above that i could see where I went wrong and that is why i asked for help.
Thank you for taking the time to reply.

How would i go about refreshing calc.input without losing the values stored in it?

4

You have to decide how to do it. but I would advise you consider the following:
I think you are giving your handleEquals too much responsibility.

what i mean by that is maybe instead of just holding a single value in state representing everything at once and trying to do everything with equals you would consider each operand individually, maybe after you press an operand you would clear the display and set another value in state of what was the previousDisplay ?(or the calculation of what should be the previousDisplay)

that way you would not ever have to worry about that whole multiple decimal problem. do you agree

1 Like
5

Hey
I went with your idea of storing the value in state elsewhere to clear it. I need help on where to put my code block so it clears

const [calc, setCalc] = useState({ input: "0" });
  const [disp, setDisp] = useState({ value: "" });

  const handleInput = (e) => {
    let val = e.target.textContent;
    if (!(calc.input.includes(".") && val === ".")) {
      if (calc.input === "0") {
        setCalc((calc.input = ""));
      } else if (calc.input.match(/(^0)\1{2,}/)) {
        setCalc(calc.input.replace(/(^0)\1{2,}/g, "0"));
      }
      setCalc({ input: calc.input + val });
    }
    if (val === "+" || val === "-" || val === "/" || val === "+") {
      setDisp((disp.value = calc.input));
      setCalc(calc.input === "");
    }

    console.log(disp.value);
    setCalc({ input: disp.value });
  };

I want it to set the value of disp equal to whatever is in calc. Then clear calc. So that the next time a button is clicked when it checks for the decimal condition it doesnt restrict the adding of a decimal point after an operator is clicked.

6

To prevent the user from entering more than one decimal point i use the following if statement

if (!(calc.input.includes(".") && val === ".")) {
     ...
}

However, this prevents the input from being something like 5.2 + 3.4 since it blocks out the entering of a second decimal point after the first time. To try and solve this i’ve tried to move the value of the initial calculation , that is, 5.2 into another state value, and clear calc.input so that it is able to go through the if condition again. This is all supposed to happen an operator is entered next. I however can’t figure out how to properly write this logic. Please help.
This is my attempt at it:

 const [calc, setCalc] = useState({ input: "0" });
  const [disp, setDisp] = useState({ value: "" });

  const handleInput = (e) => {
    let val = e.target.textContent;
    if (!(calc.input.includes(".") && val === ".")) {
      if (calc.input === "0") {
        setCalc((calc.input = ""));
      } else if (calc.input.match(/(^0)\1{2,}/)) {
        setCalc(calc.input.replace(/(^0)\1{2,}/g, "0"));
      }
    }
    if (val === "+" || val === "-" || val === "/" || val === "+") {
      setDisp((disp.value = calc.input));
      setCalc(calc.input === "");
    }
    setCalc({ input: calc.input + val });

The link to the whole app:

This is the only test i have left to complete this

7

I just tested your project, perhaps you are working on it now but I was not able to use it at all.

8

Hello, sorry about that. I was testing out a few more ideas. It didn’t cause it was broken. I’ve commented out the broken part. It works now

9

I think it would be good advice to create a diagram with the flow of your application.

  1. user does A => B should happen in the app
  2. user does C => D should happen in the app
    …

I think both you and we can’t come up with good solutions, because your code is complex due the sheer amount of regex in your godlike handleEqual function.

1 Like
10

Haha, thank you. I will take that as a compliment. But the logic i need in this case happens in the handleInput function.

I managed to handle a case where the user if the user enters a number in the form a..b it becomes a.b

I want to do the same for the case where a.b.c becomes a.bc. Is there a way i can use regex as the second parameter of the String.prototype.replace() function?
Basically the following but in the right way:
calc.input = calc.input.replace(/\d+\.\d+\.\d+/, \d+\.\d+\d+)