javascript calculator with memory

Byadmin

Dec 9, 2014

Last updated on November 16th, 2015 at 09:38 am

VN:F [1.9.22_1171]
Rating: 8.6/10 (5 votes cast)

Even if this is an advance calculator for performing arithmetic operations all the javascript code i have used here is simple and easy to understand.

Also Refer To Calculator With Basic Operations.

This calculator has a memory function in which all your calculations are saved with unlimited memory.

First step is to use HTML to create couple of buttons similar to a calculator.

<h2>Advance Simple Javascript Calculator With Memory Function</h2>
<div id="outter">
<form name="my_cal">
Display<input style="font-weight:bold" type="text" id="disp" name="disp" disabled>
<input type="text" id="cache2" name="cache2" style="display:none">
Result<input style="font-weight:bold"  type="text" id="total" name="total" disabled>
<br><textarea style="display:none" rows="4" cols="50" id="mem" disabled></textarea>
<p><input type="button" value="+" onclick="change(this.value)">
<input type="button" value="-" onclick="change(this.value)">
<input type="button" value="*" onclick="change(this.value)">
<input type="button" value="/" onclick="change(this.value)">
<input type="button" value="=" onclick="out()">
<input type="button" value="C" onclick="refresh_me()"><br>
<input type="button" value="1" onclick="change(this.value)">
<input type="button" value="2" onclick="change(this.value)">
<input type="button" value="3" onclick="change(this.value)">
<input type="button" value="4" onclick="change(this.value)">
<input type="button" value="5" onclick="change(this.value)">
<input type="button" value="." onclick="change(this.value)">
<br>
<input type="button" value="6" onclick="change(this.value)">
<input type="button" value="7" onclick="change(this.value)">
<input type="button" value="8" onclick="change(this.value)">
<input type="button" value="9" onclick="change(this.value)">
<input type="button" value="0" onclick="change(this.value)">
<input type="button" value="M" onclick="memory()">
</form>
</div>
</body>
</html>

Next step is to add some CSS style to the above HTML code

#outter
{
margin-bottom:20px;
margin-top:10px;
width:50%;
padding:15px;
border-radius:5px;
border:1px solid #7ac9b7
}
input[type=text]{
margin-bottom:20px;
margin-top:10px;
width:20%;
padding:15px;
border-radius:5px;
border:1px solid #7ac9b7
}
input[type=button]{
margin-bottom:20px;
width:10%;
padding:15px;
border-radius:5px;
border: 3px solid #000;
background-color: grey;
font-size: 40px;
}

input[type=text]:focus,textarea:focus{
border:3px solid #000;
}
input[type=button]:hover { background-color: #99000D; }

Now you will be seeing a good calculator with numbers, clear and memory option

Add the below javascript to complete the calculator.

function refresh_me()
{
var elements = document.getElementsByTagName("input");
for (var i=0; i < elements.length; i++) {
  if (elements[i].type == "text") {
    elements[i].value = "";
  }
}
}

function memory()
{
var ele = document.getElementById("mem");
if(ele.style.display == "block") {
    		ele.style.display = "none";
  	}
	else {
		ele.style.display = "block";
	}
}
function change(a)
{
if(document.getElementById("total").value != "")
{
refresh_me()
}
document.getElementById("cache2").value += a
document.getElementById("disp").value += a

}
function out(){
num = document.getElementById("cache2").value
total = eval(num);
document.getElementById("total").value = total
document.getElementById("mem").value += num+"\n"
}

refresh_me() will clear all the values inside the textbox when we click on button ‘C’
memory() will show hide div with id ‘mem’ which will save all the arithmetic operation we perform and you can see the data by clicking button ‘M’.
out() will calculate the values using eval() and display output in div with id ‘total’
change() will show numbers that we enter to the text box with id ‘disp’, We will also clone the same value in id ‘cache2’

I just used cache2 id, You can always modify this code.

As you can see we are not using any complex javascript code here, Just basic DOM.

DEMO

VN:F [1.9.22_1171]
Rating: 8.6/10 (5 votes cast)

Leave a Reply

Your email address will not be published. Required fields are marked *

6 + nine =