On a different note here is a simple calculator
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style type="text/css">
#cntr {
border: 1px solid black;
display: inline-block;
position: absolute;
font-size: 50px;
}
button {
width: 2em;
font-size: 50px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var d;
var val1 = 0;
var val = 0;
var op = '';
$(document).ready(function() {
d = document.getElementById("disp");
var cntr = $("#cntr");
var doc = $(document);
var left = (doc.width() - cntr.width()) / 2;
var top = (doc.height() - cntr.height()) / 2;
left=(left>=0)?left:-left;
top=(top>=0)?top:-top;
cntr.css("left", parseInt(left) + "px");
cntr.css("top", parseInt(top) + "px");
});
function numhandler(id) {
if (d.value == "0") {
if (id == -1) {
if (d.value.indexOf('.') == -1)
d.value += '.';
} else
d.value = id;
} else {
if (id == -1) {
if (d.value.indexOf('.') == -1)
d.value += '.';
} else
d.value += id;
}
val = parseFloat(d.value);
}
function ophandler(id) {
val1 = val;
val = 0;
op = id;
d.value = 0;
}
function eqhandler() {
if (op) {
switch(op) {
case"+":
d.value = val1 + val;
break;
case"-":
d.value = val1 - val;
break;
case"X":
d.value = val1 * val;
break;
case"/":
if (val != 0)
d.value = val1 / val;
else
alert("Cannot divide by zero");
break;
}
val = parseFloat(d.value);
}
}
</script>
</head>
<body>
<div id="cntr">
<div style="text-align:center;font-weight:bold;font-style:italic;">Calculator</div>
<table>
<tr><td colspan="4"><input id="disp" style="text-align: right;font-size: 40px;" type="text" size="20" maxlength="20" disabled="disabled" value="0" /></td></tr>
<tr>
<td><button id="btn1" onclick="numhandler(1)">1</button></td>
<td><button id="btn2" onclick="numhandler(2)">2</button></td>
<td><button id="btn3" onclick="numhandler(3)">3</button></td>
<td><button id="btnac" onclick="d.value=0;val=parseFloat(d.value);">AC</button></td>
</tr>
<tr>
<td><button id="btn4" onclick="numhandler(4)">4</button></td>
<td><button id="btn5" onclick="numhandler(5)">5</button></td>
<td><button id="btn6" onclick="numhandler(6)">6</button></td>
<td><button id="btnpls" onclick="ophandler('+')">+</button></td>
</tr>
<tr>
<td><button id="btn7" onclick="numhandler(7)">7</button></td>
<td><button id="btn8" onclick="numhandler(8)">8</button></td>
<td><button id="btn9" onclick="numhandler(9)">9</button></td>
<td><button id="btnmin" onclick="ophandler('-')">-</button></td>
</tr>
<tr>
<td><button id="btn0" onclick="numhandler(0)">0</button></td>
<td><button id="btndot" onclick="numhandler(-1)">.</button></td>
<td><button id="btnmul" onclick="ophandler('X')">X</button></td>
<td><button id="btndiv" onclick="ophandler('/')">/</button></td>
</tr>
<tr>
<td colspan="4"><button style="width:9em" id="btnequl" onclick="eqhandler()">=</button></td>
</tr>
</table>
</div>
</body>
</html>