<HTML>
<head>
<title>Chobocho's Simple Calculator</title>
<style>
.tile {
text-align:center;
width:40px;
height:40px;
font-size:24px;
background-color:"white";
border:1px solid black;
box-shadow:black 1px 1px;
}
textarea {
height:100px;
width:200px;
text-align:right;
font-size:24px;
border:1px solid black;
box-shadow:black 1px 1px;
padding:2px;
}
</style>
<script language="JavaScript">
var sum = 0;
var ret = "";
var keypadValue = [ "AC", "←", "(", ")", "7", "8", "9", "÷", "4", "5", "6", "×", "1", "2", "3", "-", "0", ".", "=", "+" ];
function init() {
var table = document.getElementById("keypad");
window.onkeydown = onKeyDown;
window.onkeyup = onKeyUp;
for (var i = 0; i < 5; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < 4; j++) {
var td = document.createElement("td");
td.className="tile";
var idx = i*4 + j;
td.value = idx;
td.index = idx;
td.textContent = keypadValue[idx];
td.onclick = onClick;
tr.appendChild(td);
}
table.appendChild(tr);
}
}
function onKeyUp(e) {
}
function onKeyDown(e) {
}
function onClick(e) {
var clkTile = e.srcElement.index;
var isClickEqual = false;
switch(clkTile) {
case 0 : // AC
sum = 0;
ret = "";
break;
case 1 : // <-
ret = ret.slice(0,-1);
break;
case 2 : // (
case 3 : // )
case 4 : // 7
case 5 : // 8
case 6 : // 9
case 7 : // ÷
case 8 : // 4
case 9 :
case 10 :
case 11 : // x
case 12 :
case 13 :
case 14 :
case 16 : // 0
case 19 : // +
ret = ret + keypadValue[clkTile];
break;
case 15 : // -
if (ret == "") {
ret = "-";
} else {
ret = ret + "-";
}
break;
case 17 : // .
if (ret == "") {
ret = "0.";
} else {
ret = ret + ".";
}
break;
case 18 : // =
if (ret == "" && sum != 0) {
ret = sum;
} else {
ret = ret.replace(/×/g, "*").replace(/÷/g, "/");
try {
sum = eval(ret);
} catch(e) {
sum = "Error";
}
ret = "";
}
isClickEqual = true;
break;
default:
break;
}
console.log("Exp : " + ret + " Sum : " + sum);
document.getElementById("result").value = isClickEqual ? sum : ret;
}
</script>
</head>
<body onload="init()">
<table id="keypad" align="center">
<tr>
<td colspan=4>
<textarea id="result" disabled=true cols="35" rows="1"></textarea>
</td>
</tr>
</table>
</body>
</HTML>
