JavaScript Calculator logic

Tell us what’s happening:
I’m stuck in the logic of the calculator problem after the user presses the operator and presses the second number. I do I keep track of the second number entered. for instance when I press 2 then 5 it calls the handle number function which takes the argument value and passes the value to the display variable then the update() function gets called and passes the display value to the screen.innertext. The part I’m confused about is how can I keep track of the second number once I type in for instance 25 * (2) how can I keep track of the second value. Thank you an advance. my complete code

let screen=document.querySelector('.screen');
let display='0';

function takevalue(value){
if(isNaN(parseInt(value))){
  handlesymbol(value);
}else{
handlenumber(value);
}
update();
}
function doMath(value){
 if(display==='0'){
  return;
}

 }
function handlesymbol(value){
   if(value==='C'){
  display='0';
  }
else if(value==='x'){
doMath(value);
}else if(value==='+'){
doMath(value);
}else if(value==='-'){
doMath(value);
}else if(value==='/'){
doMath(value);
}

}
function handlenumber(value){

if(display==='0'){
display=value;
}else{
 display+=value;
}

}  

function update(){
 screen.innerText=display;

}



 document.querySelector(".calcbody").addEventListener('click', function(event){
 
 
  takevalue(event.target.innerText);




});

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Thank you for editing it, I’ll be more careful next time

could you do something like this?

let state={
    initial:0,
    prev:"",
    operand:""
}
1 Like

making sure I have the right idea thank you for the post .so for example would
an expression like 25*2 have a prop initial value of 25 and a prev value of “*” and finally an operand value of “2”

> Blockquote

let state={
initial:25,
prev:"*"
operand:"2"

}

Here start with this I wrote for you, I didnt change your code around too much, just organized what you want to do ( i.e the idea I was trying to convey… to point you in the right direction.).You will still need to pass the rest of the tests, let me know if you want more help:

js:

//set the initial screen
let screen = document.getElementById("display")
let StartingVal=0
let state={
    currentScreen:StartingVal,
    prev:"",
    operand:"",
}
let {currentScreen,prev,operand}=state
screen.innerHTML=currentScreen
  
const handleChange=keyPressed=>{
    let s;
    if(keyPressed==="C"){
        prev=""
        operand=""
        currentScreen=StartingVal
        return screen.innerText=currentScreen
    }
    if(currentScreen[0]===undefined){
        currentScreen=keyPressed
        return screen.innerText=currentScreen
    }
    if(currentScreen[0]==="0"){
        s = currentScreen.substring(1);
        currentScreen=s
    }
    currentScreen+=keyPressed
    screen.innerText=currentScreen
}


document.querySelector(".calcbody").addEventListener("click", function (event) {
    handleChange(event.target.innerText)
  });

//   statediv.innerHTML=JSON.stringify(state, 2)

html:

<!Doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">

</head>
<body>

<div class="outercontainer">
  <div id="display"></div>
  
  <div class="calcbody">
  <button class="clear button" id="clear">C</button>
  <button class="button">←</button>
  <button class="button" id="divide" class="operand">÷</button>
  <button class="button" id="seven">7</button>
  <button class="button" id="eight">8</button>
  <button class="button" id="nine">9</button>
  <button class="button" id="multiply" class="operand">×</button>
  <button class="button" id="four">4</button>
  <button class="button" id="five">5</button>
  <button class="button" id="six">6</button>
  <button class="button" id="subtract" class="operand">-</button>
  <button class="button" id="one">1</button>
 <button class="button" id="two">2</button>
 <button class="button" id="three">3</button>
 <button class="button" id="add" class="operand">+</button>
 <button class="button" id="zero">0</button>
 <button class="button" id="decimal">.</button>
 <button class="button" class="operand" id="equals">=</button>
 </div>
 <div id="state"></div>
 </div>
 <script src="script.js"></script>
 <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</body>

</html>

css:

body {



    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  
    align-items: center;
    /* justify-content: center; */
    height: 200px;
  
  
  
  }
  
  .outercontainer {
    border: 4px solid green;
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    /* justify-content: center; */
    /* position: relative; */
  }
  
  .screen {
    border: 2px solid blue;
    display: flex;
    width: 350px;
    height: 75px;
    color: white;
    background-color: black;
    align-items: center;
  
    justify-content: flex-end;
  
  }
  
  .calcbody {
    width: 350px;
    height: 500px;
    display: flex;
  
    flex-direction: row;
    align-items: start;
    text-align: center;
    justify-content: space-between;
    flex-wrap: wrap;
  
  
  
  
  }
  
  
  #display{
    font-size: xx-large;
    font-weight: bold;
    justify-content: left;
    border: 2px solid blue;
    display: flex;
    width: 350px;
    height: 75px;
    color: white;
    background-color: black;
    align-items: center;
    /* padding-left: 5px; */
  
  }
  
  
  button {
    border: 2px solid black;
    width: 24.7%;
    height: 98px;
    font-size: 40px;
  
  }
  
  button:hover {
    background-color: blue;
  
  }
  
  #clear {
    width: 49.5%;
    height: 98px;
  }
  
  #zero {
    width: 49.7%;
    height: 98px;
  
  
  }
1 Like

Thank you I really appreciate the time you put into this , I’m Just trying to digest the code and make sure I understand it.