-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (108 loc) · 7.66 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html id="html" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vanilla JavaScript Calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="vanilla.png">
</head>
<body>
<!-- uncomment if want a link to tests -->
<a style="display:block;color:#687b91;padding:2em;" href="SpecRunner.html">Run tests</a>
<h1 class="title">Vanilla JavaScript Calculator</h1>
<p class="description">This was made while learning JS, use it at your own risk.</p>
<div id="calculator-id" class="calculator">
<div class="calculator-inner">
<h1 class="name">JS</h1>
<div id="mini-display-id" class="mini-display"></div>
<p class="text-1">BROWSER POWER</p>
<div class="display-box">
<div id="main-display-id" class="main-display"></div>
<div id="info-M-id" class="info-M">M</div>
<div id="info-E-id" class="info-E">E</div>
</div>
<p class="text-2">8 DIGITS</p>
<div class="buttons-container">
<button id="clear" class="bt operations" type="button" data-description="Clears main screen."
data-key-code="KeyC" data-operation="clear">C</button>
<button id="mc" class="bt operations" type="button" data-description="Clears memory."
data-key-code="ControlRight" data-operation="clearMemory">MC</button>
<button id="ac" class="bt operations" type="button" data-description="Clears everything."
data-key-code="Delete" data-operation="clearAll">AC</button>
<button id="help" class="bt operations bt-help" type="button"
data-description="Changes calculator to help mode. Press buttons to display information."
data-key-code="KeyH" data-operation="toggleHelpMode">Help</button>
<button id="mr" class="bt operations" type="button" data-description="Recalls number from memory."
data-key-code="ArrowUp" data-operation="recallMemory">MR</button>
<button id="ms" class="bt operations" type="button" data-description="Saves number to memory."
data-key-code="ArrowDown" data-operation="saveToMemory">MS</button>
<button id="mminus" class="bt operations" type="button"
data-description="Subtracts number from a number in memory and saves result to memory."
data-key-code="ArrowLeft" data-operation="minusFromMemory">M−</button>
<button id="mplus" class="bt operations" type="button"
data-description="Adds number to a number in memory and saves result to memory."
data-key-code="ArrowRight" data-operation="addToMemory">M+</button>
<button id="back" class="bt operations backspace" type="button"
data-description="Deletes last entered digit if no operation was performed on a number."
data-key-code="Backspace" data-operation="deleteLastEntry">←</button>
<button id="posneg" class="bt operations" type="button"
data-description="Changes number sign (negative/positive)." data-key-code="Backslash"
data-operation="changeSign">+/−
</button>
<button id="percent" class="bt operations" type="button"
data-description="Enter first number, then operation, then second number followed by %. Second number will become percentage of first number. 90 + 10% = 99"
data-key-code="KeyP" data-operation="percentageOfNumber1">%</button>
<button id="sroot" class="bt operations" type="button" data-description="Calculates square root."
data-key-code="KeyR" data-operation="squareRoot">√</button>
<button id="seven" class="bt numbers" type="button" data-description="Enters 7"
data-operation="writeNumber" data-key-code="Numpad7">7</button>
<button id="eight" class="bt numbers" type="button" data-description="Enters 8"
data-operation="writeNumber" data-key-code="Numpad8">8</button>
<button id="nine" class="bt numbers" type="button" data-description="Enters 9"
data-operation="writeNumber" data-key-code="Numpad9">9</button>
<button id="divide" class="bt operations" type="button" data-description="Enters divide operation."
data-key-code="NumpadDivide" data-operation="prepCalculation"
data-calc-function="divide">÷</button>
<button id="four" class="bt numbers" type="button" data-description="Enters 4"
data-operation="writeNumber" data-key-code="Numpad4">4</button>
<button id="five" class="bt numbers" type="button" data-description="Enters 5"
data-operation="writeNumber" data-key-code="Numpad5">5</button>
<button id="six" class="bt numbers" type="button" data-description="Enters 6"
data-operation="writeNumber" data-key-code="Numpad6">6</button>
<button id="multiply" class="bt operations" type="button"
data-description="Enters multiplication operation." data-key-code="NumpadMultiply"
data-operation="prepCalculation" data-calc-function="multiply">×</button>
<button id="one" class="bt numbers" type="button" data-description="Enters 1"
data-operation="writeNumber" data-key-code="Numpad1">1</button>
<button id="two" class="bt numbers" type="button" data-description="Enters 2"
data-operation="writeNumber" data-key-code="Numpad2">2</button>
<button id="three" class="bt numbers" type="button" data-description="Enters 3"
data-operation="writeNumber" data-key-code="Numpad3">3</button>
<button id="subtract" class="bt operations" type="button" data-description="Enters subtract operation."
data-key-code="NumpadSubtract" data-operation="prepCalculation"
data-calc-function="subtract">−</button>
<button id="zero" class="bt numbers" type="button" data-description="Enters 0"
data-operation="writeNumber" data-key-code="Numpad0">0</button>
<button id="decimal" class="bt numbers" type="button" data-description="Enters decimal point."
data-operation="writeDecimalPoint" data-key-code="NumpadDecimal">.</button>
<button id="equals" class="bt operations" data-operation="calcAndShowResult" type="button"
data-description="Performs operation and displays result." data-key-code="Space">=</button>
<button id="add" class="bt operations" type="button" data-description="Enters addition operation."
data-key-code="NumpadAdd" data-operation="prepCalculation" data-calc-function="add">+</button>
</div>
</div>
</div>
<footer class="footer">
<a class="github-link" href="https://github.com/codevivi/Vanilla-JavaScript-Calculator">Check it on
<img src="GitHub-Mark-Light-64px.png" alt="GitHub"> GitHub</a></p>
<p class="license">
Vilma J. © 2019-
<script>
document.write(new Date().getUTCFullYear());
</script>
</p>
</footer>
<script src="main.js"></script>
</body>
</html>