I have built a calculator using JS/React and I can’t seem to implement a function.
Basically I want that if 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (-) sign).
So 2*-9=-18
, but 12*-/3=4
.
Also when I type 5*-
, without even entering a second operand, it becomes 5*5
.
My Code:
const { useState } = React;
function Calculator() {
const [displayValue, setDisplayValue] = useState('0');
const [firstOperand, setFirstOperand] = useState(null);
const [operator, setOperator] = useState(null);
const [waitingForSecondOperand, setWaitingForSecondOperand] = useState(false);
const inputDigit = (digit) => {
if (waitingForSecondOperand) {
setDisplayValue(String(digit));
setWaitingForSecondOperand(false);
} else {
setDisplayValue(displayValue === '0' ? String(digit) : displayValue + digit);
}
};
const inputDecimal = () => {
if (!displayValue.includes('.')) {
setDisplayValue(displayValue + '.');
}
};
const performOperation = (nextOperator) => {
const inputValue = parseFloat(displayValue);
if (firstOperand === null) {
setFirstOperand(inputValue);
} else if (operator) {
const result = calculate(firstOperand, inputValue, operator);
setDisplayValue(String(result));
setFirstOperand(result);
}
setWaitingForSecondOperand(true);
setOperator(nextOperator);
};
const calculate = (firstOperand, secondOperand, operator) => {
switch (operator) {
case '+':
return firstOperand + secondOperand;
case '-':
return firstOperand - secondOperand;
case '*':
return firstOperand * secondOperand;
case '/':
return firstOperand / secondOperand;
default:
return secondOperand;
}
};
const resetCalculator = () => {
setDisplayValue('0');
setFirstOperand(null);
setOperator(null);
setWaitingForSecondOperand(false);
};
return (
<div className="calculator">
<div id="display" className="display">{displayValue}</div>
<button id="clear" className="button" onClick={resetCalculator}>AC</button>
<button id="divide" className="button operator" onClick={() => performOperation('/')}>/</button>
<button id="multiply" className="button operator" onClick={() => performOperation('*')}>*</button>
<button id="subtract" className="button operator" onClick={() => performOperation('-')}>-</button>
<button id="seven" className="button" onClick={() => inputDigit(7)}>7</button>
<button id="eight" className="button" onClick={() => inputDigit(8)}>8</button>
<button id="nine" className="button" onClick={() => inputDigit(9)}>9</button>
<button id="add" className="button operator" onClick={() => performOperation('+')}>+</button>
<button id="four" className="button" onClick={() => inputDigit(4)}>4</button>
<button id="five" className="button" onClick={() => inputDigit(5)}>5</button>
<button id="six" className="button" onClick={() => inputDigit(6)}>6</button>
<button id="decimal" className="button" onClick={inputDecimal}>.</button>
<button id="one" className="button" onClick={() => inputDigit(1)}>1</button>
<button id="two" className="button" onClick={() => inputDigit(2)}>2</button>
<button id="three" className="button" onClick={() => inputDigit(3)}>3</button>
<button id="equals" className="button equals" onClick={() => performOperation('=')}>=</button>
<button id="zero" className="button" onClick={() => inputDigit(0)}>0</button>
</div>
);
}
ReactDOM.render(<Calculator />, document.getElementById('root'));
I have tried everything that came to mind but nothing seems to work, or even if it works it will break the whole calculator.