Calculator in ASP.NET using JavaScript
Design code for above design (Default.aspx)
<head runat="server">
<title>Calculator</title>
//java script
file
<script src="calculation.js" type="text/javascript"></script>
//css for
clear and close button
<style type="text/css">
#btnClear
{
z-index:
1;
left:
322px;
top:
344px;
height:38px;
position:
absolute;
}
#btnClose
{
z-index:
1;
left:
398px;
top:
344px;
height:38px;
position:
absolute;
}
</style>
</head>
<body onload="Page_Load()">
<input id="btn0" type="button" value="0" style="position:absolute; top: 287px; left: 339px; height: 38px; width: 39px;" onclick="btn_Click(0)"/>
<input id="btn9" type="button" value="9" style="position:absolute; top: 231px; left: 394px; height: 38px; width: 39px;" onclick="btn_Click(9)"/>
<input id="btn8" type="button" value="8" style="position:absolute; top: 231px; left: 340px; height: 38px; width: 39px;" onclick="btn_Click(8)"/>
<input id="btn7" type="button" value="7" style="position:absolute; top: 232px; left: 283px; height: 38px; width: 39px;" onclick="btn_Click(7)"/>
<input id="btn6" type="button" value="6" style="position:absolute; top: 173px; left: 395px; height: 38px; width: 39px;" onclick="btn_Click(6)"/>
<input id="btn5" type="button" value="5" style="position:absolute; top: 175px; left: 339px; height: 38px; width: 39px;" onclick="btn_Click(5)"/>
<input id="btn4" type="button" value="4" style="position:absolute; top: 175px; left: 282px; height: 38px; width: 39px;" onclick="btn_Click(4)"/>
<input id="btn3" type="button" value="3" style="position:absolute; top: 114px; left: 394px; height: 38px; width: 39px;" onclick="btn_Click(3)"/>
<input id="btn2" type="button" value="2" style="position:absolute; top: 115px; left: 339px; height: 38px; width: 39px;" onclick="btn_Click(2)"/>
<input id="btn1" type="button" value="1" style="position:absolute; top: 116px; left: 283px; height: 38px; width: 39px;" onclick="btn_Click(1)"/>
<input id="btnEqual" type="button" value="=" style="position:absolute; top: 285px; left: 394px; height: 38px; width: 39px;" onclick="btnEqual_Click()"/>
<input id="btnDec" type="button" value="." style="position:absolute; top: 286px; left: 285px; height: 38px; width: 39px;" onclick="btnDec_Click()"/>
<input id="btnSub" type="button"
value="-"
style="position:absolute; top: 173px; left: 451px; height: 38px; width: 39px;" onclick="btnSub_Click()"/>
<input id="btnDiv" type="button" value="/" style="position:absolute; top: 284px; left: 449px; height: 38px; width: 39px;" onclick="btnDiv_Click()"/>
<input id="btnAdd" type="button" value="+" style="position:absolute; top: 114px; left: 448px; height: 38px; width: 39px;" onclick="btnAdd_Click()"/>
<input id="btnMul" type="button" value="x" style="position:absolute; top: 229px; left: 449px; height: 38px; width: 39px;" onclick="btnMul_Click()"/>
<input id="txtValue" type="text" style="position:absolute; top: 80px; left: 284px; width: 201px; text-align:right;"/>
<input id="btnClose" type="button" value="Close" onclick="btnClose_Click()" /><input id="btnClear"
type="button" value="Clear" onclick="btnClear_Click()"/>
</body>
JavaScript code for the above
design(Calculation.js)
//initilizing
values
//val to store
value
var val=0;
//enumerated
operator
var operators
= { "Add":1, "Sub":2, "Mul":3,
"Div":4, "Equal":5
};
//to check for
operator clicked
var
operator_clicked = 0;
//to chech
whether number button is pressed nor not
var pressed;
//to check whether
decinal button is pressed or not
var
dec_pressed;
//equal
function, which is called in every operators function
function equal()
{
switch
(operator_clicked)
{
case
operators.Add:
//converting
value of text box and adding it to val.
val = (val +
parseFloat(document.getElementById("txtValue").value));
break;
case
operators.Sub:
val = (val -
parseFloat(document.getElementById("txtValue").value));
break;
case
operators.Mul:
val = (val *
parseFloat(document.getElementById("txtValue").value));
break;
case
operators.Div:
val = (val /
parseFloat(document.getElementById("txtValue").value));
break;
default:
if
(txtValue.Text != "")
val =
parseFloat(document.getElementById("txtValue").value);
else
val = 0;
break;
}
//displaying
the value of val in text box.
document.getElementById("txtValue").value = val;
//setting
decimal pressed to false
dec_pressed = false;
//setting
number button pressed to false
pressed = false;
}
//function
called on page load
function
Page_Load()
{
//initilizing
values
val = 0;
operator_clicked = 0;
pressed = false;
dec_pressed = false;
document.getElementById("txtValue").value = "0";
}
//this is
called on ever number button clicked event
function
btn_Click(a)
{
//checking
whether number button is pressed for the first time after any
//operator
button click or page load or not.
if
(pressed ==false)
document.getElementById("txtValue").value = "";
//setting
value of pressed to true
pressed = true;
//concatinating
argument value to value of text box.
document.getElementById("txtValue").value += a;
}
//this
function is called on add button clicked
function
btnAdd_Click()
{
//equal()
function is called
equal();
//setting
operator_clicked value to value of operator.Add ie. 1
operator_clicked =
operators.Add;
}
function
btnSub_Click()
{
equal();
operator_clicked = operators.Sub;
}
function
btnMul_Click()
{
equal();
operator_clicked =
operators.Mul;
}
function
btnDiv_Click()
{
equal();
operator_clicked =
operators.Div;
}
function
btnEqual_Click()
{
equal();
val = 0;
operator_clicked = operators.Equal;
}
//function
called when clear button is pressed
function
btnClear_Click()
{
//setting
everything to its initial value.
document.getElementById("txtValue").value = "";
val = 0;
operator_clicked = 0;
pressed = false;
dec_pressed = false;
}
//this
function is called when close button is clicked
function
btnClose_Click()
{
//this will
close the current window.
window.close();
}
//function
called when decimal button is pressed
function
btnDec_Click()
{
//checking
whether number button is pressed or not
if
(pressed == false)
document.getElementById("txtValue").value = "";
//checking
whether decimal point already exist or not
if
(dec_pressed == false)
{
if
(document.getElementById("txtValue").value
== "")
document.getElementById("txtValue").value = "0.";
else
document.getElementById("txtValue").value += ".";
}
//setting
dec_pressed and pressed to true
dec_pressed = true;
pressed = true;
}
Screen shot
