Create a calculator in JavaScript

<form name="calculator">
 <input type="text" disabled id="total" style="text-align: right; background: white; width:">
</form>

<table>
 <tr>
  <td><input type="button" value="C" style="width: 100%" onclick="calculator.total.value = ''"></td>
  <td><input type="button" value="/" style="width: 100%" onclick="calculator.total.value += '/'"></td>
  <td><input type="button" value="*" style="width: 100%" onclick="calculator.total.value += '*'"></td>
  <td><input type="button" value="-" style="width: 100%" onclick="calculator.total.value += '-'" ></td>
 </tr>
 <tr>
  <td><input type="button" value="7" onclick="calculator.total.value += '7'"></td>
  <td><input type="button" value="8" onclick="calculator.total.value += '8'"></td>
  <td><input type="button" value="9" onclick="calculator.total.value += '9'"></td>
  <td rowspan="2"><input type="button" onclick="calculator.total.value += '+'" style="height: 50px; vertical-align: middle" value ="+"></td>
 </tr>
 <tr>
  <td><input type="button" value="4" onclick="calculator.total.value += '4'"></td>
  <td><input type="button" value="5" onclick="calculator.total.value += '5'"></td>
  <td><input type="button" value="6" onclick="calculator.total.value += '6'"></td>
 </tr>
 <tr>
  <td><input type="button" value="1" onclick="calculator.total.value += '1'"></td>
  <td><input type="button" value="2" onclick="calculator.total.value += '2'"></td>
  <td><input type="button" value="3" onclick="calculator.total.value += '3'"></td>
  <td rowspan="2"><input type="button" onclick="calculator.total.value = eval(calculator.total.value)" style="height: 50px; vertical-align: middle" value ="="></td>
 </tr>
 <tr>
  <td colspan="2"><input type="button" style="width: 68px; text-align: center" value="0" onclick="calculator.total.value += '0'"></td>
  <td><input type="button" value="."  style="width: 100%" onclick="calculator.total.value += '.' "></td>
 </tr>
</table>

<div align="center">
  <center><table border="2" width="200" cellspacing="0" cellpadding="0" bgcolor="#000000"
style="border-color:black" onClick="previouskey=event.srcElement.innerText">
  <tr>
    <td width="100%" bgcolor="#FFFFFF" id="result"
    style="font:bold 20px Verdana;color:black;text-align='right'">0</td>
  </tr>
  <tr>
    <td width="100%" valign="middle" align="center"><table border="0" width="100%"
    cellspacing="0" cellpadding="0" style="font:bold 20px Verdana;color:white">
      <tr>
        <td width="80%" align="center"><table border="1" width="100%" cellspacing="0"
        cellpadding="0" style="cursor:hand;font:bold 20px Verdana;color:white"
        onMouseover="if (event.srcElement.tagName=='TD')event.srcElement.style.color='yellow'"
        onMouseout="event.srcElement.style.color='white'" onselectStart="return false"
        onClick="calculate()" height="82">
          <tr>
            <td width="25%" align="center" height="17">7</td>
            <td width="25%" align="center" height="17">8</td>
            <td width="25%" align="center" height="17">9</td>
            <td width="25%" align="center" height="17">/</td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19">4</td>
            <td width="25%" align="center" height="19">5</td>
            <td width="25%" align="center" height="19">6</td>
            <td width="25%" align="center" height="19">*</td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19">1</td>
            <td width="25%" align="center" height="19">2</td>
            <td width="25%" align="center" height="19">3</td>
            <td width="25%" align="center" height="19">-</td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19">0</td>
            <td width="25%" align="center" height="19"
            onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td>
            <td width="25%" align="center" height="19">.</td>
            <td width="25%" align="center" height="19">+</td>
          </tr>
        </table>
        </td>
        <td width="20%"><div align="left"><table border="1" width="100%" cellspacing="0"
        cellpadding="0">
          <tr>
            <td width="100%" style="cursor:hand;font:bold 20px Verdana;color:white;text-align:center"
            onClick="result.innerText=0;results=''">C</td>
          </tr>
        </table>
        </div><div align="left"><table border="1" width="100%" cellspacing="0" cellpadding="0"
        height="81">
          <tr>
            <td width="100%" style="cursor:hand;font:bold 32px Verdana;color:white;text-align:center"
            onMouseover="event.srcElement.style.color='yellow'"
            onMouseout="event.srcElement.style.color='white'" onClick="calculateresult()">=</td>
          </tr>
        </table>
        </div></td>
      </tr>
    </table>
    </td>
  </tr>
</table>


  </center>
</div>


<script language="JavaScript1.2">

/*
DHTML Calculator Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

var results=''
var previouskey=''
var re=/(/|*|+|-)/
var re2=/(/|*|+|-){2}$/
var re3=/.+(/|*|+|-).+/
var re4=/d|./
var re5=/^[^/*+].+d$/
var re6=/./

function calculate(){
if (event.srcElement.tagName=="TD"){
if (event.srcElement.innerText.match(re4)&&previouskey=="=")
results=''
if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}

results+=event.srcElement.innerText
if (results.match(re2))
results=results.substring(0,results.length-2)+results.charAt(results.length-1)

result.innerText=results
}
}

function calculateresult(){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}



function pn(){
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}

</script>

<form name="Keypad" action "http://www.addlinkat.com/java/free-java-download/style="text-align:" center; background-position: center">
  <table>
    <b>
    <tr>
      <td align="center"><div align="center"><center><table border="5" width="50" height="60"
      bordercolor="#C0C0C0" bordercolorlight="#E8E8E8" bordercolordark="#000000" cellpadding="0"
      cellspacing="3" bgcolor="#C0C0C0">
        <tr>
          <td colspan="3" align="middle" bordercolor="#C0C0C0" bordercolorlight="#FFFFFF"
          bordercolordark="#000000"><div align="right"><p><input name="ReadOut" type="Text"
          size="24" value="0" width="100%"></td>
          <td </TD bordercolor="#C0C0C0"> </td>
          <td align="center" bordercolor="#C0C0C0"><input name="btnClear" type="Button"
          value="  C  " onclick="Clear()"></td>
          <td align="center" bordercolor="#C0C0C0"><div align="center"><center><p><input
          name="btnClearEntry" type="Button" value="  CE " onclick="ClearEntry()"></td>
        </tr>
        <tr align="center">
          <td bordercolor="#C0C0C0"><div align="center"><center><p><input name="btnSeven"
          type="Button" value="  7  " onclick="NumPressed(7)"> </td>
          <td bordercolor="#C0C0C0" align="center"><div align="center"><center><p><input
          name="btnEight" type="Button" value="  8  " onclick="NumPressed(8)"> </td>
          <td bordercolor="#C0C0C0" align="center"><div align="center"><center><p><input
          name="btnNine" type="Button" value="  9  " onclick="NumPressed(9)"> </td>
          <td bordercolor="#C0C0C0" align="center"> </td>
          <td align="center" bordercolor="#C0C0C0"><input name="btnNeg" type="Button" value=" +/- "
          onclick="Neg()"></td>
          <td align="center" bordercolor="#C0C0C0"><input name="btnPercent" type="Button"
          value="  % " onclick="Percent()"> </td>
        </tr>
        <tr align="center">
          <td align="center" bordercolor="#C0C0C0"><input name="btnFour" type="Button" value="  4  "
          onclick="NumPressed(4)"> </td>
          <td align="center" bordercolor="#C0C0C0"><input name="btnFive" type="Button" value="  5  "
          onclick="NumPressed(5)"> </td>
          <td align="center" bordercolor="#C0C0C0"><input name="btnSix" type="Button" value="  6  "
          onclick="NumPressed(6)"> </td>
          <td bordercolor="#C0C0C0"> </td>
          <td align="middle" bordercolor="#C0C0C0"><div align="center"><center><p><input
          name="btnPlus" type="Button" value="  +  " onclick="Operation('+')"></td>
          <td align="center" bordercolor="#C0C0C0"><div align="center"><center><p><input
          name="btnMinus" type="Button" value="   -   " onclick="Operation('-')"></td>
        </tr>
        <tr align="center">
          <td align="center" bordercolor="#C0C0C0"><input name="btnOne" type="Button" value="  1  "
          onclick="NumPressed(1)"> </td>
          <td align="center" bordercolor="#C0C0C0"><input name="btnTwo" type="Button" value="  2  "
          onclick="NumPressed(2)"> </td>
          <td bordercolor="#C0C0C0"><div align="center"><center><p><input name="btnThree"
          type="Button" value="  3  " onclick="NumPressed(3)"> </td>
          <td bordercolor="#C0C0C0" align="center"> </td>
          <td align="center" bordercolor="#C0C0C0"><div align="center"><center><p><input
          name="btnMultiply" type="Button" value="  *  " onclick="Operation('*')"> </td>
          <td align="center" bordercolor="#C0C0C0"><div align="center"><center><p><input
          name="btnDivide" type="Button" value="   /   " onclick="Operation('/')"></td>
        </tr>
        <tr align="center">
          <td align="center" bordercolor="#C0C0C0"><input name="btnZero" type="Button" value="  0  "
          onclick="NumPressed(0)"> </td>
          <td align="center" bordercolor="#C0C0C0"><input name="btnDecimal" type="Button"
          value="   .  " onclick="Decimal()"> </td>
          <td colspan="3" bordercolor="#C0C0C0"> </td>
          <td bordercolor="#C0C0C0"><div align="center"><center><p><input name="btnEquals"
          type="Button" value="  =  " onclick="Operation('=')"></td>
        </tr>
      </table>
      </center></div></td>
    </tr>
  </table>
  </b>
</form>
<font face="Verdana, Arial, Helvetica" size="2"><script LANGUAGE="JavaScript">
<!-- Begin
var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value  = Num;
FlagNewNum = false;
   }
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
   }
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
   }
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
   }
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
   }
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
// End -->
</script>