Tuesday, October 21, 2008

Java script calculator.










<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
var a=0;
var b=0;
var preop='+'
var blnOned=false;
var blnRefDisp=true;
var prevKey='';
function PerformCalc()
{
if(preop=='+')
{
a=parseFloat(a)+parseFloat(b);
}
if(preop=='-')
{
a=parseFloat(a)-parseFloat(b);
}
if(preop=='*')
{
a=parseFloat(a)*parseFloat(b);
}
if(preop=='/')
{
a=parseFloat(a)/parseFloat(b);
}
}
function IsOperatorPressed(val)
{
if(val=='/' || val=='*' || val=='-' || val=='+')
{
return true;
}
return false;
}
function CalPress(iddval)
{
var valOt=document.getElementById('txtOutPut');
if(iddval!='On')
{
if(blnOned==false)
{
return;
}
}
if(iddval=='On')
{
valOt.value='0';
document.getElementById('btnOnOff').value='Off';
preop='+';
a=0;
b=0;
blnOned=true;
return;
}
else if(iddval=='C')
{
valOt.value=0;
preop='+';
a=0;
b=0;
return;
}
else if(iddval=='Off')
{
document.getElementById('btnOnOff').value='On';
valOt.value='';
preop='+';
a=0;
b=0;
blnOned=false;
return;
}
if(iddval=='=')
{
blnRefDisp=true;
PerformCalc();
valOt.value=a;
}
else if(IsOperatorPressed(iddval))
{
blnRefDisp=true;
if(prevKey=='=')
{
b=0;
}
else
{
if(prevKey!=iddval)
{
PerformCalc();
valOt.value=a;
}
}
preop=iddval;
}
else
{
if(prevKey=='=')
{
a=0;
}
if(blnRefDisp==true)
{
b=iddval;
}
else
{
if( b=='0')
b=iddval;
else
b=b+iddval
}
valOt.value=b;
blnRefDisp=false;
}
prevKey=iddval;
}


//functions on key press div
function keyPrss()
{

var val=String.fromCharCode(event.charCode ? event.charCode : event.keyCode);
if(event.keyCode==44)
{
return false;
}
if(event.keyCode>=42 && event.keyCode<=57)
{
CalPress(val);
return true;
}
if(event.keyCode==27)
{
CalPress('C');
return true;
}
if(event.keyCode==111)
{
CalPress(document.getElementById('btnOnOff').value);
return true;
}
if(event.keyCode==13)
{
CalPress('=');
return true;
}
return false;

// document.getElementById('lblTest').innerText=event.keyCode;
}
</script>
</head>
<body>
<label id="lblTest" runat="server"></label>
<div style="text-align: center" onkeypress="keyPrss()">
<table border="2">
<tr>
<td colspan="4">
<input id="txtOutPut" type="text" style="width:80%;text-align:right" readonly="readonly"/></td>
</tr>
<tr>

<td>
<input id="btnSqrt" style="width: 100px;color:Red;display:none;" type="button" value="Sqrt" onclick="CalPress(this.value);" /></td>


<td>
<input id="btnClear" style="width: 100px;color:Red" type="button" value="C" onclick="CalPress(this.value);" /></td>
<td colspan="2">
<input id="btnOnOff" style="width: 100px;color:Red" type="button" value="On" onclick="CalPress(this.value);"/></td>
</tr>
<tr>
<td style="width: 100px">
<input id="btn7" style="width: 50px;color:Blue" type="button" value="7" onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btn8" style="width: 50px;color:Blue" type="button" value="8" onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btn9" style="width: 50px;color:Blue" type="button" value="9" onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btnDiv" style="width: 50px;color:Red" type="button" value="/" onclick="CalPress(this.value);"/></td>
</tr>
<tr>
<td style="width: 100px">
<input id="btn4" style="width: 50px;color:Blue" type="button" value="4" onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btn5" style="width: 50px;color:Blue" type="button" value="5" onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btn6" style="width: 50px;color:Blue" type="button" value="6" onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btnMul" style="width: 50px;color:Red" type="button" value="*" onclick="CalPress(this.value);"/></td>
</tr>
<tr>
<td style="width: 100px">
<input id="btn1" style="width: 50px;color:Blue" type="button" value="1" onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btn2" style="width: 50px;color:Blue" type="button" value="2" onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btn3" style="width: 50px;color:Blue" type="button" value="3" onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btnSub" style="width: 50px;color:Red" type="button" value="-" onclick="CalPress(this.value);"/></td>
</tr>
<tr>
<td style="width: 100px">
<input id="btn0" style="width: 50px;color:Blue" type="button" value="0" onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btnDot" style="width: 50px;color:Blue" type="button" value="." onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btnEq" style="width: 50px;color:Red" type="button" value="=" onclick="CalPress(this.value);"/></td>
<td style="width: 100px">
<input id="btnAdd" style="width: 50px;color:Red" type="button" value="+" onclick="CalPress(this.value);"/></td>
</tr>
</table>
</div>

</body>
</html>

No comments: