...

View Full Version : Basic Calculator



Basscyst
12-06-2003, 11:37 PM
I know there is a million of them but here's a little calculator script I made just for kicks. Feedback is always appreciated, good or bad.

I think I did a pretty good job of mirroring the windows calculator functionality.

Basic keys are mapped (optionally) to the keyboard.



<html>
<head>
<title>Web Calculator</title>
<style type="text/css">
table
{
text-align:center;
background-color:#e5e5c5;
}

.button
{
width:55px;
font-weight:bold;
background-color:lightblue;
color:#333399;
}

.functbut
{
width:55px;
font-weight:bold;
background-color:lightblue;
color:red;
}

.back
{
width:115px;
font-weight:bold;
background-color:lightblue;
color:red;
}

.header
{
color:#333399;
}

#display
{
text-align:right;
}
</style>
<script type="text/javascript">
var find=document.getElementById;
var temp=0;
var total=0;
var which=0;
var m=0;

function Mplus()
{
m=parseFloat(find('display').value) + m;
find('memory1').value="M+*";
}

function Mclear()
{
m=0;
find('memory1').value="M+";
}

function Mrecall()
{
find('display').value=m;
}

function Mreplace()
{
m=find('display').value;
}

function showMe(num)
{
if(temp==0)
{
find('display').value=num;
temp=1;
}
else
{
find('display').value+=num;
}
}

function calcEm(num)
{
str=parseFloat(find('display').value);
if(which==0)
{
total=find('display').value;
temp=0;
which=num;
}
else if(which==1)
{
find('display').value=parseFloat(total)+ str;
total=find('display').value;
which=num;
temp=0;
}
else if(which==2)
{
find('display').value=parseFloat(total) * str;
total=find('display').value;
which=num;
temp=0;
}
else if(which==3)
{
find('display').value=parseFloat(total) / str;
total=find('display').value;
which=num;
temp=0;
}
else if(which==4)
{
find('display').value=parseFloat(total) - str;
total=find('display').value;
which=num;
temp=0;
}

}

function clearAll()
{
find('display').value=0;
which=0;
temp=0;
total=0;
}

function clearDisplay()
{
find('display').value="0"
temp=0;
}

function fractIt()
{
find('display').value=(1) / str;
}

function getPerc()
{
var d=find('display').value=str / 100;
calcEm(0);
}

function backSpace()
{
find('display').value=find('display').value.substring("0",find('display').value.length-1);
}

function getRoot()
{
find('display').value=Math.sqrt(find('display').value);
}

function invertIt()
{
var w=find('display').value.indexOf("-");
if(w==-1)
{
find('display').value="-" + find('display').value
}
else
{
find('display').value=find('display').value.substring("1",find('display').value.length);
}
}



function keyHandler()
{
keys=new Array();
keys[97]=("1");
keys[98]=("2");
keys[99]=("3");
keys[100]=("4");
keys[101]=("5");
keys[102]=("6");
keys[103]=("7");
keys[104]=("8");
keys[105]=("9");
keys[96]=("0");
keys[13]=("equal");
keys[107]=("plus");
keys[110]=("dot");
keys[109]=("minus");
keys[106]=("times");
keys[111]=("divide");
keys[110]=("dot");
keys[8]=("back");
keys[27]=("clear");

kc=window.event.keyCode;

if(keys[kc]!=undefined)
{
cColor('#333399');
setTimeout('cColor("lightblue")',100);
find(keys[kc]).click();
}
return false;
}
function cColor(bcolor)
{
find(keys[kc]).style.background=bcolor;
}

function keyOnOff()
{
var b=find('keychoice').checked
if(b==true)
{
document.onkeydown=keyHandler;
}
else
{
document.onkeydown="";
}
}
function checkHandler()
{
var e=find('keychoice').checked
if(e==false)
{
e=true;
}
else
{
e=false;
}
keyOnOff();
}

</script>
</head>
<body>
<table cellspacing="0" border="1">
<thead>
<th colspan="6" class="header">Web Calculator</th>
</thead>
<tr>
<td colspan="6"><input type="text" size="43" id="display" value="0."></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Backspace" id="back" class="back" onclick="backSpace()"></td>
<td colspan="2"><input type="button" id="ce" value="CE" class="back" onclick="clearDisplay()"></td>
<td colspan="2"><input type="button" id="clear" value="C" class="back" onclick="clearAll()"></td>
</tr>
<tr>
<td><input type="button" class="functbut" value="MC" onclick="Mclear();"></td>
<td><input type="button" class="button" id="7" value="7" onclick="showMe('7')"></td>
<td><input type="button" class="button" id="8" value="8" onclick="showMe('8')"></td>
<td><input type="button" class="button" id="9" value="9" onclick="showMe('9')"></td>
<td><input type="button" class="functbut" id="divide" value="/" onclick="calcEm(3)"></td>
<td><input type="button" class="button" id="sqrt" value="sqrt" onclick="getRoot();"></td>
</tr>
<tr>
<td><input type="button" class="functbut" value="MR" onclick="Mrecall();"></td>
<td><input type="button" class="button" id="4" value="4" onclick="showMe('4')"></td>
<td><input type="button" class="button" id="5" value="5" onclick="showMe('5')"></td>
<td><input type="button" class="button" id="6" value="6" onclick="showMe('6')"></td>
<td><input type="button" class="functbut" id="times" value="*" onclick="calcEm(2)"></td>
<td><input type="button" class="button" id="perc" value="%" onclick="getPerc()"></td>
</tr>
<tr>
<td><input type="button" class="functbut" value="MS" onclick="Mreplace();"></td>
<td><input type="button" class="button" id="1" value="1" onclick="showMe('1')"></td>
<td><input type="button" class="button" id="2" value="2" onclick="showMe('2')"></td>
<td><input type="button" class="button" id="3" value="3" onclick="showMe('3')"></td>
<td><input type="button" class="functbut" id="minus" value="-" onclick="calcEm(4)"></td>
<td><input type="button" class="button" id="x" value="1/x" onclick="fractIt()"></td>
</tr>
<tr>
<td><input type="button" class="functbut" value="M+" id="memory1" onclick="Mplus();"></td>
<td><input type="button" class="button" id="0" value="0" onclick="showMe('0')"></td>
<td><input type="button" class="button" id="flop" value="+/-" onclick="invertIt()"></td>
<td><input type="button" class="button" id="dot" value="." onclick="showMe(this.value)"></td>
<td><input type="button" class="functbut" id="plus" value="+" onclick="calcEm(1)"></td>
<td><input type="button" class="functbut" id="equal" value="=" onclick="calcEm(0)"></td>
</tr>
<tr>
<td colspan="6" class="header">Num Pad On:<input type="checkbox"
id="keychoice" onclick="checkHandler();keyOnOff();"></td>
</tr>
</table>

</body>
</html>


Happy Calculating,
Basscyst

JAVAEOC
12-07-2003, 06:40 PM
its IE only :(

Basscyst
12-07-2003, 07:14 PM
Yes, Didn't realize that when I posted it. I was at work and we just have IE.

neo2297
12-15-2003, 12:40 AM
great script!!!!:thumbsup: :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum