JS Calculator

Posted by

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>
=============================

Leave a Reply

Your email address will not be published. Required fields are marked *