-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (114 loc) · 4.31 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
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator Casio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<!-- Design of calcualtor by: @shreyasminocha | https://codepen.io/shreyasminocha/pen/gKPrLy
I changed some things, so it looks better, when clicking.
Like, it doesn't select text when clicking on buttons.
And it have feeling of clicking when button is pressed
-->
<!--
fonts used:
- 'Helvetica' for buttons etc
- 'Eurostile Extended Black' for Casio logo
- 'Computer Modern' for "fx-82MS" in the top-right corner
- 'Pirulen' for "SVPAM"
- 'Scientifc Calculator LED' for "571^2"
- 'Segment7Standard' for "326041."
-->
<div class="calculator">
<span class="logo">Casio</span>
<span class="model">fx-82MS</span>
<span class="svpam">S-V.P.A.M.</span>
<div class="screen">
<div id="input1" class="input"></div>
<div id="haha" class="main-display" maxlength="12">326041.</div>
</div>
<div class="modifiers">
<button class="shift center-shift" tabindex="1"></button>
<button class="alpha center-alpha" tabindex="2"></button>
<button id="on" class="on center-shift" tabindex="4"></button>
<button class="mode" tabindex="3"></button>
</div>
<div class="replay">Replay</div>
<!--
<button class="nav up">▲</button>
<button class="nav down">▼</button>
<button class="nav left">◀︎</button>
<button class="nav right">▶︎</button>
-->
<table class="function-keys">
<tr>
<td><button class="reciprocal center-shift">x<span class="sup">-1</span></button></td>
<td><button class="combin center-shift">nCr</button></td>
<td></td>
<td></td>
<td><button class="pol">Pol(</button></td>
<td><button class="cube center-shift">x<span class="sup">3</span></button></td>
</tr>
<tr>
<td><button class="frac center-shift">a<span class="sup">b</span>/<span class="xxs">c</span></button></td>
<td><button>√</button></td>
<td><button class="square">x<span class="sup">2</span></button></td>
<td><button class="pow center-shift">^</button></td>
<td><button class="log center-shift">log</button></td>
<td><button class="ln">ln</button></td>
</tr>
<tr>
<td><button class="minus">(−)</button></td>
<td><button class="deg">°′″</button></td>
<td><button class="hyp">hyp</button></td>
<td><button id="sin" class="sin">sin</button></td>
<td><button class="cos">cos</button></td>
<td><button class="tan">tan</button></td>
</tr>
<tr>
<td><button class="rcl center-shift">RCL</button></td>
<td><button class="eng center-shift">ENG</button></td>
<td><button class="open-paren">(</button></td>
<td><button class="close-paren">)</button></td>
<td><button class="comma">,</button></td>
<td><button class="mem-plus">M+</button></td>
</tr>
</table>
<table class="basic-keys">
<tr>
<td><button id="7">7</button></td>
<td><button id="8">8</button></td>
<td><button id="9">9</button></td>
<td><button id="del" class="pink del center-shift">DEL</button></td>
<td><button id="ac" class="pink ac center-shift">AC</button></td>
</tr>
<tr>
<td><button id="4">4</button></td>
<td><button id="5">5</button></td>
<td><button id="6">6</button></td>
<td><button id="mulitply">×</button></td>
<td><button id="divide" >÷</button></td>
</tr>
<tr>
<td><button id="1"class="one center-shift">1</button></td>
<td><button id="2"class="two center-shift">2</button></td>
<td><button id="3">3</button></td>
<td><button id="plus" >+</button></td>
<td><button id="minus">−</button></td>
</tr>
<tr>
<td><button id="0"class="zero center-shift">0</button></td>
<td><button id="period" class="period center-shift">.</button></td>
<td><button class="exp center-shift">EXP</button></td>
<td><button class="ans center-shift">Ans</button></td>
<td><button id="equal" class="equals center-shift">=</button></td>
</tr>
</table>
</div>
</main>
<!-- na kraj da ucita ovo, da bi radilo -->
<script src="script.js"></script>
</body>
</html>