<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
Leave Comment
3 Comments