<!-- JavaScript:Maths code snippet 7. -->
<!-- Calculator. -->
<!-- This snippet is based on code for 'The desktop calculator'
supplied in 'Mastering JavaScript and JScript' (2000), 
by James Jaworski, published by Sybex -->

<!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" xml:lang="en" lang="en">
<!-- Code source: http://www.justfigures.co.uk/ -->
<!-- A resource for web developers using XHTML, CSS, JavaScript, PHP -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View code snippet page</title>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
var r = new Array(2)
function setStartState(){
state="start"
 r[0] = "0"
 r[1] = "0"
operand=""
ix=0
}
function addDigit(n){
 if(state=="gettingInteger" || state=="gettingFloat")
  r[ix]=appendDigit(r[ix],n)
 else{
  r[ix]=""+n
  state="gettingInteger"
 }
 display(r[ix])
}
function appendDigit(n1,n2){
 if(n1=="0") return ""+n2
 var s=""
 s+=n1
 s+=n2
 return s
}
function display(s){
 document.calculator.total.value=s
}
function addDecimalPoint(){
 if(state!="gettingFloat"){ 
  decimal=true
  r[ix]+="."
  if(state=="haveOperand" || state=="getOperand2") r[ix]="0."
  state="gettingFloat"
  display(r[ix])
 }
}
function clearDisplay(){
 setStartState()
 display(r[0])
}
function changeSign(){
 if(r[ix].charAt(0)=="-") r[ix]=r[ix].substring(1,r[ix].length)
 else if(parseFloat(r[ix])!=0) r[ix]="-"+r[ix]
 display(r[ix])
}
function calc(){
 if(state=="gettingInteger" || state=="gettingFloat" ||
  state=="haveOperand"){
  if(ix==1){
   r[0]=calculateOperation(operand,r[0],r[1])
   ix=0
  }
 }else if(state=="getOperand2"){
  r[0]=calculateOperation(operand,r[0],r[0])
  ix=0
 }
 state="haveOperand"
 decimal=false
 display(r[ix])
}
function calculateOperation(op,x,y){
 var result=""
 if(op=="+"){
  result=""+(parseFloat(x)+parseFloat(y))
 }else if(op=="-"){
  result=""+(parseFloat(x)-parseFloat(y))
 }else if(op=="*"){
  result=""+(parseFloat(x)*parseFloat(y))
 }else if(op=="/"){
  if(parseFloat(y)==0){
   alert("Division by 0 not allowed.")
   result=0
  }else result=""+(parseFloat(x)/parseFloat(y))
 }
 return result
}
function performOp(op){
 if(state=="start"){
  ++ix
  operand=op
 }else if(state=="gettingInteger" || state=="gettingFloat" ||
  state=="haveOperand"){
  if(ix==0){
   ++ix
   operand=op
  }else{
   r[0]=calculateOperation(operand,r[0],r[1])
   display(r[0])
   operator=op
  }
 }
 state="getOperand2"
 decimal=false
}
//]]>
</script>
</head>

<body>
<script language="JavaScript" type="text/javascript">
<!--
setStartState()
// -->
</script>

<form name="calculator" id="calculator">
<table border="1">
<tr>
<td colspan="3">
<input type="text" name="total" value="0" size="15" /></td>
</tr>
<tr>
<td><input type="button" name="n0" value="   0   "
 onclick="addDigit(0)" /></td>
<td><input type="button" name="n1" value="   1   "
 onclick="addDigit(1)" /></td>
<td><input type="button" name="n2" value="   2   "
 onclick="addDigit(2)" /></td>
</tr>
<tr>
<td><input type="button" name="n3" value="   3   "
 onclick="addDigit(3)" /></td>
<td><input type="button" name="n4" value="   4   "
 onclick="addDigit(4)" /></td>
<td><input type="button" name="n5" value="   5   "
 onclick="addDigit(5)" /></td>
</tr>
<tr>
<td><input type="button" name="n6" value="   6   "
 onclick="addDigit(6)" /></td>
<td><input type="button" name="n7" value="   7   "
 onclick="addDigit(7)" /></td>
<td><input type="button" name="n8" value="   8   "
 onclick="addDigit(8)" /></td>
</tr>
<tr>
<td><input type="button" name="n9" value="   9   "
 onclick="addDigit(9)" /></td>
<td><input type="button" name="decimal" value="   .    "
 onclick="addDecimalPoint()" /></td>
<td><input type="button" name="plus" value="   +   "
 onclick="performOp('+')" /></td>
</tr>
<tr>
<td><input type="button" name="minus" value="   -    "
 onclick="performOp('-')" /></td>
<td><input type="button" name="multiply" value="   *   "
 onclick="performOp('*')" /></td>
<td><input type="button" name="divide" value="    /   "
 onclick="performOp('/')" /></td>
</tr>
<tr>
<td><input type="button" name="equals" value="   =   "
 onclick="calc()" /></td>
<td><input type="button"  name="sign" value=" +/-  " 
 onclick="changeSign()" /></td>
<td><input type="button" name="clearField" value="   C  "
 onclick="clearDisplay()" /></td>
</tr>
</table>
</form>

</body>
</html>