This repository has been archived by the owner on Mar 3, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
88 lines (78 loc) · 3.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple calculator</title>
<link rel="stylesheet" href="style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="home">
<div id="displaytext">0</div>
<div id="buttonbox">
<button class="r1 c1" data-sym="mc"></button>
<button class="r1 c2" data-sym="m+"></button>
<button class="r1 c3" data-sym="/"></button>
<button class="r1 c4" data-sym="*"></button>
<button class="r2 c1" data-sym="7"></button>
<button class="r2 c2" data-sym="8"></button>
<button class="r2 c3" data-sym="9"></button>
<button class="r2 c4" data-sym="-"></button>
<button class="r3 c1" data-sym="4"></button>
<button class="r3 c2" data-sym="5"></button>
<button class="r3 c3" data-sym="6"></button>
<button class="r3 c4" data-sym="+"></button>
<button class="r4 c1" data-sym="1"></button>
<button class="r4 c2" data-sym="2"></button>
<button class="r4 c3" data-sym="3"></button>
<button class="r4 c4" data-sym="="></button>
<button class="r5 c1" data-sym="0"></button>
<button class="r5 c2" data-sym="."></button>
</div>
<script src="./calculator.js"></script>
<script>
window.onload = function() {
let elDisplay = document.querySelector('#displaytext')
let engine = new Calculator(function(state) {
console.debug('ui update listener', state);
document.title = `Simple calculator: ${state.displayText}`;
if ( elDisplay ) {
elDisplay.innerHTML = state.displayText
}
return;
});
let DATA = {
'mc': { text: 'Mc', fn: () => { engine.clear(); } },
'm+': { text: 'M+', fn: notImplemented },
'+': { text: '+', fn: () => { engine.setOperation('+'); }},
'-': { text: '-', fn: notImplemented },
'/': { text: '÷' , fn: notImplemented},
'*': { text: '×' , fn: notImplemented},
'.': { text: '.', fn: notImplemented },
'0': { text: '0', fn: () => { engine.appendDigit('0'); } },
'1': { text: '1', fn: () => { engine.appendDigit('1'); } },
'2': { text: '2', fn: () => { engine.appendDigit('2'); } },
'3': { text: '3', fn: notImplemented },
'4': { text: '4', fn: notImplemented },
'5': { text: '5', fn: notImplemented },
'6': { text: '6', fn: notImplemented },
'7': { text: '7', fn: notImplemented },
'8': { text: '8', fn: notImplemented },
'9': { text: '9', fn: notImplemented },
'=': { text: '=', fn: () => { engine.execute(); } },
}
document.querySelectorAll('[data-sym]').forEach(function(element, index, arr) {
let sym = element.getAttribute('data-sym');
let data = DATA[sym];
if ( !data ) {
console.error('could not load symbol', sym);
return;
}
element.innerHTML = data.text;
element.onclick = data.fn.bind(data);
});
}
</script>
</body>
</html>