I am trying hard but still cant implement consecutive addition . And in this code below by prevOp will not update with setPrevOp idk why.
const App = () => {
const [prevOp, setPrevOp] = React.useState('');
const [currentOp, setCurrentOp] = React.useState('');
const [op, setOp] = React.useState('');
const [currentDisp, setCurrentDisp] = React.useState('');
React.useEffect(() => { }, [prevOp, currentOp])
const clear = () => {
setPrevOp('');
setCurrentOp('');
setCurrentDisp(0);
setOp('');
}
const appendNum = (value) => {
if (Number.isInteger(value)) {
setCurrentOp(currentOp.toString() + value.toString())
}
else if (value === '.') {
if (currentOp.includes('.')) {
setCurrentOp(currentOp);
}
else {
setCurrentOp(currentOp.toString() + '.');
}
}
}
const chooseOperation = (operator) => {
let temp = '';
if (prevOp === '' && currentOp !== '') {
temp = currentOp;
console.log(typeof(temp));
setPrevOp(temp);
setCurrentOp('');
console.log('current is' + currentOp + 'prev is ' + prevOp);
setOp(operator)
}
// if (prevOp === '' && currentOp!== '' ) {
// setPrevOp(currentOp);
// console.log(typeof(currentOp));
// setCurrentOp('');
// setOp(opera);
// console.log(prevOp);
// console.log(prevOp+opera);
// }
// else if(prevOp !== '' && currentOp!== '' && opera!==undefined){
// setCurrentDisp(prevOp.toString()+opera.toString()+currentOp.toString());
// setCurrentDisp(eval(currentDisp));
// console.log('omega');
// setCurrentOp('');
// setPrevOp(currentDisp);
// setOp('');
// }
}
const insertOp = (operation) => {
switch (operation) {
case '/':
chooseOperation('Ć·');
break;
case '-':
chooseOperation('-');
break;
case '+':
chooseOperation('+');
break;
case '*':
chooseOperation('*');
break;
default:
return
}
}
return (<div className="calculator-grid">
<div className="output">
<div className="previous-operand">{currentDisp}</div>
<div className="current-operand">{currentOp}</div>
</div>
<button className="span-two" id='clear' onClick={() => [clear()]}>AC</button>
<button id='divide' onClick={() => [insertOp('/')]} >Ć·</button>
<button id='one' onClick={() => [appendNum(1)]}>1</button>
<button id='two' onClick={() => [appendNum(2)]}>2</button>
<button id='three' onClick={() => [appendNum(3)]}>3</button>
<button id='multiply' onClick={() => [insertOp('*')]} >X</button>
<button id='four' onClick={() => [appendNum(4)]}>4</button>
<button id='five' onClick={() => [appendNum(5)]}>5</button>
<button id='six' onClick={() => [appendNum(6)]}>6</button>
<button id='add' onClick={() => [insertOp('+')]}>+</button>
<button id='seven' onClick={() => [appendNum(7)]}>7</button>
<button id='eight' onClick={() => [appendNum(8)]}>8</button>
<button id='nine' onClick={() => [appendNum(9)]}>9</button>
<button id='subtract' onClick={() => [insertOp('-')]} >-</button>
<button id='decimal' onClick={() => [appendNum('.')]}>.</button>
<button id='zero' onClick={() => [appendNum(0),]}>0</button>
<button className="equal" onClick={() => [compute()]}
id="equals">=</button>
</div>);
}
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />)