|
CS479/579 - Web Programming II
|
Displaying ./code/ES/calculator.html
<!DOCTYPE html>
<html>
<head>
<title> Calculator example </title>
<meta charset='utf-8'>
<style>
body { font-family: "Arial"; }
table {
border: 1px solid black;
font-size: 32px;
margin-left: 100px;
border-spacing: 5px;
}
td {
border: 1px solid black;
min-width: 60px; height: 60px;
text-align: center;
box-shadow: 3px 3px 2px lightgray;
}
#output {
font-size: 150%;
text-align: right;
background-color: #EEEEEE;
}
</style>
<script>
var output = "";
function _clear() {
output = "";
document.getElementById("output").innerHTML = " ";
}
function add(ch) {
output += ch;
document.getElementById("output").innerHTML = output;
}
function compute() {
output = eval(output);
document.getElementById("output").innerHTML = output;
}
</script>
</head>
<body>
<h1> My Calculator </h1>
<table>
<thead>
<tr> <th colspan=4 id='output'>
</thead>
<tbody>
<tr>
<td onclick='add("/");'> /
<td onclick='add("*");'> *
<td onclick='add("-");'> -
<td onclick='_clear();'> clr
<tr>
<td onclick='add("7");'> 7
<td onclick='add("8");'> 8
<td onclick='add("9");'> 9
<td onclick='add("+");' rowspan=2> +
<tr>
<td onclick='add("4");'> 4
<td onclick='add("5");'> 5
<td onclick='add("6");'> 6
<tr>
<td onclick='add("1");'> 1
<td onclick='add("2");'> 2
<td onclick='add("3");'> 3
<td onclick='compute();' rowspan=2> Enter
<tr>
<td colspan=2 onclick='add("0");'> 0
<td onclick='add(".");'> .
</tbody>
<tfoot>
<tr> <th colspan=4> My calculator
</tfoot>
</table>
</body>
</html>
|