Javascript Calculator - Test #14

I have been working on this calculator for two weeks now. Many blood sweat and tears were poured into this little thing. I chose a different solution than I think most people did. My calculator calculates each time the operator is pressed and displays the result each time, as opposed to using some sort of string manipulation that seems to be popular with most people. I don’t want to deal with regex or any kind of string manipulation (unless necessary) for this challenge. I know you’re not supposed to use global variables in react but I just wanted to get this done and I found that it does the job.

So I’m stuck on #14 (as well as another one but I’ll figure that one out later). I can get the result when I press the equals button. But if I press another operator after that, it kind of resets and doesn’t continue based on the sum of the previous calculation. Can anyone give me a hint on what to look out for? I know the culprit lies in my calculate function but I don’t understand why the sum is being zeroed out after I press an operator.

Here’s my if statement to check if it’s good to calculate or not

if(canCalculate){
    calculate()
    setPrevVal(sum)
    setInput(sum)
    // setOperator(null)
    canCalculate = false;
    isDecimalAllowed = true
  }
function calculate(){
    
    if(hitEqualsButton){
      console.log("Hit equals is true.")
    }
    
    let op
    if(prevOp == null || hitEqualsButton){
      op = operator
      hitEqualsButton = false
    }else{
      op = prevOp
    }
    console.log("Calculating using this operator...")
    console.log(op)    
    
    let prevValHolder = Number(prevVal)
    let inputHolder = Number(input)
    
    
    switch(op){
      case "add":
        sum = prevValHolder + inputHolder
        break;
      case "subtract":
        if(prevValHolder == 0){
          sum = inputHolder - 0
        }else{
          sum = prevValHolder - inputHolder
        }
        break;
     case "multiply":
        if(prevValHolder == 0){
          sum = inputHolder * 1
        }else{
          sum = prevValHolder * inputHolder
        }
        break;
     case "divide":
        if(prevValHolder == 0 && sum == 0){
          sum = inputHolder / 1
        }else{
          sum = prevValHolder / inputHolder
        }
        break;
      default:
        sum = sum
        break;
    }
    
    setPrevOp(operator)
    console.log("Sum: ")
    console.log(sum)
  }

I really wanna get to the pomodoro clock…

Hi @actionjumper42, spent some time looking at your code.
Took me some time to grasp it.

The error comes in using those global variables.
There’s a reason why they are generally considered bad, and as you are seeing now cutting corner unfortunately will come back and bite you at some point.

I’ll give you a quick demo:

click 9 + 1, then =

You get 10 (correct).
But then click -
You’ll notice that the result quickly jump to 20.

Why?

In your clickOperator you are manually changing the canCalculate and setting the operation.

When changing state, react will re-render. On the next render the

if(canCalculate){
    calculate()

Will be true and be called.
Meaning that you will use prevOperation (+) and the input (10), so it will calculate 10 + 10 == 20.

But that’s a huge logic flaw, all I did was clicking a - button, I never asked for anything else :slight_smile:


Honestly my suggestion at this point is to start simple: get rid of your auto calculating logic and make sure the calculator works when using the equal sign and you clear all the test cases.

Then you can iterate over and add extra functionality on top of it.

My advice is to always start simple, you’ll soon find out that simplicity is often complex enough :slight_smile:

Hope this helps.

1 Like

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