Trying to create a calculator that display the previous typed number at the top

Question

Windows calculator here. This is the full code of my calculator. i think the function is correct but i want to display the previous number i typed at the top of the current number i typed just as the default calculator running on windows.

<html>
<head></head>
<style>
input[type=button] {
    color:white;
    border:0;
    display:block;
    height:110px;
    width: 90px;
 font-family: Broadway;
 font-size:200%;
 box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
 border-radius: 3px;
 margin: 0 7px 11px 0;
 transition: all 0.2s ease;
}
td{
 background-color:;
 
 

}
input[type=text] {
    color:black;
 font-size:300%;
     height:100px;
 border-radius: 5px;
  
 
}
#calculator {
 width: 425px;
 height: auto;
 
 margin: 100px auto;
 padding: 20px 20px 9px;
 
 background: #9dd2ea;
 background: linear-gradient(#9dd2ea, #8bceec);
 border-radius: 3px;
 box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
 
}

p{
 color:grey;
}

#clear{
 height:2px;
 width:2px;
 background-color: red;
}



</style>

<body background="background.jpg">


<div style="background-color: " id=calculator>

<center>
<h1>CASIO</h1>
<h3>Calas og Sinselyo</h31>
<br/>
</center>
<center>
<form Name="calc">
 <table>
  <tr>
   <td colspan=4><input style="background-color:#F0FFFF" type="text" size=12 Name="display" readonly="true"></td>
  </tr>
 </table>
 <br>
 </center>
 <center>
 <table> 
  <tr>
  
   <td><input style="height:50px; background-color:#F08080" type=button value="C" OnClick="calc.display.value=''"></td>
  </tr>
  <tr>
   <td><input type=button value="1" OnClick="calc.display.value+='1'"></td>
   <td><input type=button value="2" OnClick="calc.display.value+='2'"></td>
   <td><input type=button value="3" OnClick="calc.display.value+='3'"></td>
   <td><input type=button value="+" OnClick="calc.display.value+='+'"></td>
  </tr>
  <tr>
   <td><input type=button value="4" OnClick="calc.display.value+='4'"></td>
   <td><input type=button value="5" OnClick="calc.display.value+='5'"></td>
   <td><input type=button value="6" OnClick="calc.display.value+='6'"></td>
   <td><input type=button value="-" OnClick="calc.display.value+='-'"></td>
  </tr>
  <tr>
   <td><input type=button value="7" OnClick="calc.display.value+='7'"></td>
   <td><input type=button value="8" OnClick="calc.display.value+='8'"></td>
   <td><input type=button value="9" OnClick="calc.display.value+='9'"></td>
   <td><input type=button value="x" OnClick="calc.display.value+='*'"></td>
  </tr>
  <tr>
   <td><input type=button value="0" OnClick="calc.display.value+='0'"></td>
   <td><input type=button value="." OnClick="calc.display.value+='.'"></td>
   <td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
   <td><input type=button value="/" OnClick="calc.display.value+='/'"></td>
  </tr>
 </table>
</form>
</center>
<p align="right">by: Raymart C. Lopez</p>
</div>


</body>
</html>

Do you mind using Jquery? – Andrew Bone Nov 26 '15 at 09:36 — Andrew Bone, Nov 26 '15 at 09:36

wf4 · Answer 1 · 2015-11-26T10:25:18.087

You can achieve this by adding a second "display". Each time you click on a button, instead of just updating the first display, you can update both like this:

input[type=button] {
    color:black;
    border:0;
    display:block;
    height:110px;
    width: 90px;
 font-family: Broadway;
 font-size:200%;
 box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
 border-radius: 3px;
 margin: 0 7px 11px 0;
 transition: all 0.2s ease;
}
td{
 background-color:;
 
 

}
input[type=text] {
    color:black;
 font-size:300%;
     height:100px;
 border-radius: 5px;
  
 
}
#calculator {
 width: 425px;
 height: auto;
 
 margin: 100px auto;
 padding: 20px 20px 9px;
 
 background: #9dd2ea;
 background: linear-gradient(#9dd2ea, #8bceec);
 border-radius: 3px;
 box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
 
}

p{
 color:grey;
}

#clear{
 height:2px;
 width:2px;
 background-color: red;
}

<div style="background-color: " id=calculator>

<center>
<h1>CASIO</h1>
<h3>Calas og Sinselyo</h31>
<br/>
</center>
<center>
<form Name="calc">
 <table>
  <tr>
   <td colspan=4>
                <input style="background-color:#F0FFFF" type="text" size=12 Name="displayAll" readonly="true">
                <input style="background-color:#F0FFFF" type="text" size=12 Name="display" readonly="true"></td>
  </tr>
 </table>
 <br>
 </center>
 <center>
 <table> 
  <tr>
  
   <td><input style="height:50px; background-color:#F08080" type=button value="C" OnClick="calc.display.value='';calc.displayAll.value='' "></td>
  </tr>
  <tr>
   <td><input type=button value="1" OnClick="calc.display.value+='1'; calc.displayAll.value+='1';"></td>
   <td><input type=button value="2" OnClick="calc.display.value+='2'; calc.displayAll.value+='2';"></td>
   <td><input type=button value="3" OnClick="calc.display.value+='3'; calc.displayAll.value+='3';"></td>
   <td><input type=button value="+" OnClick="calc.display.value+='+'; calc.displayAll.value+='+';"></td>
  </tr>
  <tr>
   <td><input type=button value="4" OnClick="calc.display.value+='4'; calc.displayAll.value+='4';"></td>
   <td><input type=button value="5" OnClick="calc.display.value+='5'; calc.displayAll.value+='5';"></td>
   <td><input type=button value="6" OnClick="calc.display.value+='6'; calc.displayAll.value+='6';"></td>
   <td><input type=button value="-" OnClick="calc.display.value+='-'; calc.displayAll.value+='-';"></td>
  </tr>
  <tr>
   <td><input type=button value="7" OnClick="calc.display.value+='7'; calc.displayAll.value+='7';"></td>
   <td><input type=button value="8" OnClick="calc.display.value+='8'; calc.displayAll.value+='8';"></td>
   <td><input type=button value="9" OnClick="calc.display.value+='9'; calc.displayAll.value+='9';"></td>
   <td><input type=button value="x" OnClick="calc.display.value+='*'; calc.displayAll.value+='*';"></td>
  </tr>
  <tr>
   <td><input type=button value="0" OnClick="calc.display.value+='0'; calc.displayAll.value+='0';"></td>
   <td><input type=button value="." OnClick="calc.display.value+='.'; calc.displayAll.value+='.';"></td>
   <td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value); calc.displayAll.value+='='+eval(calc.display.value);"></td>
   <td><input type=button value="/" OnClick="calc.display.value+='/';calc.displayAll.value+='/';"></td>
  </tr>
 </table>
</form>
</center>
<p align="right">by: Raymart C. Lopez</p>
</div>

Another way to approach this type of task is to create a single function to do the work for you and each time you click a button, have that function decide what to do. You can see an example of that here: https://jsfiddle.net/f4gz4uub/1/

score 0 · Accepted Answer · edited May 23 '17 at 12:30

You'll need to expand a bit on the calculator button functions in order to achieve this, but it's perfectly possibly without needing to delve into jQuery.

As mentioned, you'll need a "second screen" to keep the equation string in.

The following implements the functionality you're looking for, plus a few little bits to make it work as expected.

You should take care when using eval(), as it will literally execute any valid JavaScript code. More info: Is Javascript eval() so dangerous?

var endOfCalculation = false;
var els = document.getElementsByClassName('calc-button');
for(var i = 0;i < els.length;i++) {
    els[i].addEventListener('click', function(e) {
        var source = e.target || e.srcElement;
        
        addToEquation(source.value);
    }, false);
}

var clearEl = document.getElementById('clearButton');
clearEl.addEventListener('click', function() {
    calc.display.value = '';
    calc.displayTop.value = '';
});

var equalsEl = document.getElementById('calcEquals');
equalsEl.addEventListener('click', function() {
    calc.displayTop.value += calc.display.value;
    executeCalculation();
    endOfCalculation = true;
});

function executeCalculation() {    
    calc.display.value = eval(calc.displayTop.value);     
}


function addToEquation(char) {
    if(endOfCalculation) {
        calc.displayTop.value = '';
        
        if(!isOperator(char)) {
            calc.display.value = '';
            calc.displayTop.value = '';
        }
        
        endOfCalculation = false;
    }
    
    calc.display.value += char;
    
    if(isOperator(char)) {
        calc.displayTop.value += calc.display.value;
        calc.display.value = '';
    }
}

function isOperator(char) {
    return char === '+' || char === '-' || char === '*' || char === '/';
}

input[type=button] {
    color:white;
    border:0;
    display:block;
    height:110px;
    width: 90px;
 font-family: Broadway;
 font-size:200%;
 box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
 border-radius: 3px;
 margin: 0 7px 11px 0;
 transition: all 0.2s ease;
}
td{
 background-color:;
 
 

}

#topRow {
    height: 50px;
    padding-bottom:0;    
}

input[type=text] {
    color:black;
 font-size:300%;
     height:100px;
 border-radius: 5px;
  
 
}
#calculator {
 width: 425px;
 height: auto;
 
 margin: 100px auto;
 padding: 20px 20px 9px;
 
 background: #9dd2ea;
 background: linear-gradient(#9dd2ea, #8bceec);
 border-radius: 3px;
 box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
 
}

p{
 color:grey;
}

#clear{
 height:2px;
 width:2px;
 background-color: red;
}

<body background="background.jpg">


<div style="background-color: " id=calculator>

<center>
<h1>CASIO</h1>
<h3>Calas og Sinselyo</h3>
<br/>
</center>
<center>
<form Name="calc">
 <table>
  <tr>
   <td colspan=4><input id="topRow" style="background-color:#F0FFFF" type="text" size=12 Name="displayTop" readonly="true"></td>
  </tr>
            <tr>
   <td colspan=4><input id="immediateRow" style="background-color:#F0FFFF" type="text" size=12 Name="display" readonly="true"></td>
  </tr>
 </table>
 <br>
 </center>
 <center>
 <table> 
  <tr>
  
   <td><input style="height:50px; background-color:#F08080" type=button value="C" id="clearButton"></td>
  </tr>
  <tr>
   <td><input type="button" value="1" class="calc-button"></td>
   <td><input type="button" value="2" class="calc-button"></td>
   <td><input type="button" value="3" class="calc-button"></td>
   <td><input type="button" value="+" class="calc-button"></td>
  </tr>
  <tr>
   <td><input type="button" value="4" class="calc-button"></td>
   <td><input type="button" value="5" class="calc-button"></td>
   <td><input type="button" value="6" class="calc-button"></td>
   <td><input type="button" value="-" class="calc-button"></td>
  </tr>
  <tr>
   <td><input type="button" value="7" class="calc-button"></td>
   <td><input type="button" value="8" class="calc-button"></td>
   <td><input type="button" value="9" class="calc-button"></td>
   <td><input type="button" value="*" class="calc-button"></td>
  </tr>
  <tr>
   <td><input type="button" value="0" class="calc-button"></td>
   <td><input type="button" value="." class="calc-button"></td>
   <td><input type="button" value="=" id="calcEquals"></td>
   <td><input type="button" value="/" class="calc-button"></td>
  </tr>
 </table>
</form>
</center>
<p align="right">by: Raymart C. Lopez</p>
</div>

jsFiddle: http://jsfiddle.net/sysnull/ufyp6qdk/

i copied the code you give and try to run it but whenever i clicked a button nothing appears in the screen.. no numbers appearing? — Raymart Lopez, Nov 26 '15 at 12:40
If you look at the JS snippet, there's a for loop that adds the click event programmatically. I just tried running the snippet and it works okay — if you're trying to run it locally, remember that the JS needs to be enclosed in `` tags and that the HTML snippet doesn't include all of the document tags, as they're automatically applied. — Chris Davis, Nov 27 '15 at 09:57

Trying to create a calculator that display the previous typed number at the top

2 Answers2