Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts

    Basic Calculator

    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.

    Code:
    <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
    Helping to build a bigger box. - Adam Matthews

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    its IE only

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Yes, Didn't realize that when I posted it. I was at work and we just have IE.
    Helping to build a bigger box. - Adam Matthews

  • #4
    New Coder
    Join Date
    Dec 2003
    Location
    warren,Mi
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    great script!!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •