63 lines
2.5 KiB
HTML
63 lines
2.5 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Calculator</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/calculator.css"/>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="calculator">
|
||
|
|
<div id="display">
|
||
|
|
<div id="display_cell">
|
||
|
|
<div id="display_scroll">
|
||
|
|
<table id="display_grid">
|
||
|
|
<col id="display_gutter"/>
|
||
|
|
<col id="display_main"/>
|
||
|
|
<col id="display_other"/>
|
||
|
|
<!-- the display lines go into this empty tbody -->
|
||
|
|
<tbody id="display_grid_body"/>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="divide">
|
||
|
|
<div><button>+</button></div>
|
||
|
|
</div>
|
||
|
|
<div id="button_pad">
|
||
|
|
<table>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><button id="kp_7" class="pad_button">7</button></td>
|
||
|
|
<td><button id="kp_8" class="pad_button">8</button></td>
|
||
|
|
<td><button id="kp_9" class="pad_button">9</button></td>
|
||
|
|
<td><button id="kp_div" class="pad_button round_pad_button">÷</button></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><button id="kp_4" class="pad_button">4</button></td>
|
||
|
|
<td><button id="kp_5" class="pad_button">5</button></td>
|
||
|
|
<td><button id="kp_6" class="pad_button">6</button></td>
|
||
|
|
<td><button id="kp_mul" class="pad_button round_pad_button">×</button></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><button id="kp_1" class="pad_button">1</button></td>
|
||
|
|
<td><button id="kp_2" class="pad_button">2</button></td>
|
||
|
|
<td><button id="kp_3" class="pad_button">3</button></td>
|
||
|
|
<td><button id="kp_sub" class="pad_button round_pad_button">−</button></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><button id="kp_0" class="pad_button">0</button></td>
|
||
|
|
<td><button id="kp_dot" class="pad_button round_pad_button">.</button></td>
|
||
|
|
<td><button id="kp_eq" class="pad_button round_pad_button">=</button></td>
|
||
|
|
<td><button id="kp_add" class="pad_button round_pad_button">+</button></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript" src="js/calculator.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var calculator = new Calculator();
|
||
|
|
window.addEventListener('load', calculator.init.bind(calculator), false);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|