JS Calculator

Monday, December 14, 2009
I have just created a calculator that can be invoked in a page.

Currently, the key combination for invoking the calculator is the Ctrl Windows key. This shows and hides the calculator. The calculator has a text area and the user can type in an arithmetic (Validation is pending for non arithmetic keys) expression and on enter key, the same is evaluated.

Here is the code
=============================
<html>
<head>
<script language="javascript">
document.onkeyup = KeyCheck;
var calcVisible = false;

function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID)
{
case 91:
if (!calcVisible)
ShowCalc('CalcPlace')
else
HideCalc('CalcPlace');
break;
default:
//alert(KeyID);
}
}

function ShowCalc(ParentId)
{
var strCalcEl="<div id='calc'><textarea id='calcInput' style='width:300px; height: 50px;' onkeydown='EvalCalc(event);'></textarea><br/><input id='calcResult' type='text' readonly STYLE='width:300px;'/></div>";
document.getElementById(ParentId).innerHTML=strCalcEl;
calcVisible = true;
document.getElementById("calcInput").focus();
}

function HideCalc(ParentId)
{
document.getElementById(ParentId).innerHTML="";
calcVisible = false;
}

function EvalCalc(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID)
{
case 13:
document.getElementById('calcResult').value=eval(document.getElementById("calcInput").value);
break;
default:
//alert(KeyID);
}
}
</script>
</head>
<body>
<div id="CalcPlace" style="width:100%;"></div>
</body>
</html>
=============================
Filed Under: Javascript

Add comment

biuquote
Loading