Calculator consecutive operation JS react project

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 />)


share your codepen or similar link, and add a line number where exactly do you think it’s happening

that way it becomes a lot easier for people to look at and help you if they can, thanks :slight_smile:

As said, please post a live example.

Don’t rely on console logs after state setters. Create a useEffect and use that for logging. Put the state variables you want to log in the dependencies array and then have console logs inside that run every time the state changes.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(count);
}, [count]);
1 Like

I can now perform operations consecutively but now hamburger tester not showing and i dont think test for user story 10. i.e i can input multiple zero at start. also i am currently displaying result and two operands seperately how can i show like mentioned in test.

plz check my reply below and see if you can help. any help would be appreciated.

plz check my reply above i attached full pen.

thanks for adding your codepen, it’s very useful to see code beforehand in any interactive console.

i can see currently it’s passing 8 test cases and fails 13 of them, and i’d try to ‘minimize’ number of ‘fail test cases’ first, this way it will be easier for you to track and resolve rest of them

it’s useful if you go chronologically each test cases and resolve them that way, thats just my observation, you might find your own way of doing things, thats upto you

user story number 10, is related to 7,8 and 9 as well!! hence my recommendation to go chronologically to avoid such fail test cases!! hope this was useful, happy coding :slight_smile:

i updated the code and now it passes 13 test . Now the hard test is 5*-5 need some logic for it how can i store two operators really need some brain storming. if you have any clue of what can be done plz share.

basically, overwrite previous ‘operator’

i saw that once user clicks on an “operator”, that closes out from selecting any other, perhaps look into that!!

1 Like

overwriting operator is happening but problem is 5*-5 giving me 0 instead of -25 because * gets overwritten by - .

so that means, look into calculation functionality of it!! see if/how it’s doing what it’s doing…

or maybe, you’re doing something like this for situation like that setResult('0'); as you did for “clear” functionality

or maybe look into this bit as well:

if(op==='+'||op==='-'){ 
         res=eval(first.toString()+op+'0');    // (* -) will run this conditional if im not mistaken
         setFirst(res.toString());
         setResult(res.toString());
         setOp(null);
      }

So every thing works now except last test which i mentioned before . Idk how i can keep record of operators.

its test 13 that is failing every thing else is passing now.

I’m not really sure how you are supposed to handle it but the way the example project does it is simply by not switching the operator if what comes after it is a -.

It basically seems like you can’t switch from any operator to -

1 Like

it seems like , “13” is failing for “consecutive operations” now, but for “individual operations” it’s fine!!

so perhaps, look into that logic, where you handle “consecutive operations”, it should be that!! at least seems like it ti me!!

1 Like

I did it finally. but too much if else in code at least it is working fine. thankyou for your help.

i did it finally . i am too much happy btw thanks for your help. Took me a lot of if else logics and brain storming.

congratulations, but which ‘conditionals’ did it? or you brought in another set of ‘conditionals’ into existing?

i added few more conditions to check if after * or / comes - than add - also in expression like 12*-5 eval function knows how to handle this. so i just had to tell it. its hard to understand for someone else but i understand what is happening since i wrote the code. XD