Last updated on December 27th, 2022 at 03:54 pm
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.
<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>
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.
<script language="javascript" type="text/javascript">
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"
}
</script>
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.
admin