-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (116 loc) · 4.55 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Calculator</title>
</head>
<body>
<!-- The Whole Calculator -->
<div class="container noSelect wrapper-all">
<!-- This is for the purpose of history and memory side which
won't be present in smaller screen sizes -->
<!-- Header -->
<div class="container noSelect wrapper-header">
<div class="name"><p>Calculator</p></div>
<div class="top-bar minimize"><p>🗕</p></div>
<div class="top-bar maximize"><p>🗖</p></div>
<div class="top-bar close"><p>✕</p></div>
</div>
<!-- -------------------------------------------------------- -->
<!-- Main Part -->
<div class="container noSelect wrapper-main">
<div class="main bars">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</div>
<div class="main standard">
<p>Standard</p>
</div>
<div class="main pop">
<i class="fa fa-sign-out fa-lg" aria-hidden="true"></i>
</div>
<div class="main history">
<i class="fa fa-clock-o fa-lg" aria-hidden="true"></i>
</div>
<div class="main number">
<div id="holder"></div>
<div id="numbers-results" class="number">0</div>
</div>
<div class="m">
<div class="main-m md" id="mc">MC</div>
<div class="main-m md" id="mr">MR</div>
<div class="main-m mh" id="mp">M+</div>
<div class="main-m mh" id="mm">M−</div>
<div class="main-m mh" id="ms">MS</div>
</div>
</div>
<!-- -------------------------------------------------------- -->
<!-- Numbers and Functions -->
<div class="container noSelect wrapper-num-fun">
<button class="functions percent"><p>%</p></button>
<button class="functions ce"><p>CE</p></button>
<button class="functions c"><p>C</p></button>
<button class="functions delete" id="delete">
<p><span>➨</span></p>
</button>
<button class="functions one-divided-x">
<p><sup>1</sup>∕<sub>x</sub></p>
</button>
<button class="functions x-squared">
<p>x<sup>2</sup></p>
</button>
<button class="functions squared-x">
<p><sup>2</sup>√x</p>
</button>
<button class="functions division-sign functionShowAble">
<p>÷</p>
</button>
<button class="numbers n7"><p>7</p></button>
<button class="numbers n8"><p>8</p></button>
<button class="numbers n9"><p>9</p></button>
<button class="functions multiplication-sign functionShowAble">
<p>×</p>
</button>
<button class="numbers n4"><p>4</p></button>
<button class="numbers n5"><p>5</p></button>
<button class="numbers n6"><p>6</p></button>
<button class="functions minus-sign functionShowAble"><p>-</p></button>
<button class="numbers n1"><p>1</p></button>
<button class="numbers n2"><p>2</p></button>
<button class="numbers n3"><p>3</p></button>
<button class="functions plus-sign functionShowAble">
<p>+</p>
</button>
<button class="functions plus-minus">
<p><sup>+</sup>∕<sub>−</sub></p>
</button>
<button class="numbers n0"><p>0</p></button>
<button class="functions dot bigger"><p>.</p></button>
<button class="functions equals"><p>=</p></button>
<button class="functions cube-x">
<p>x<sup>3</sup></p>
</button>
</div>
<!-- -------------------------------------------------------- -->
<!-- History And Memory -->
<div class="container noSelect wrapper-history-memory">
<div class="container container-history-memory">
<div class="container noSelect">
<p class="history-m">History</p>
</div>
<div class="container noSelect">
<p class="memory">Memory</p>
</div>
</div>
<div class="history-memory-show">
<ul id="history-memory-show"></ul>
</div>
</div>
</div>
<!-- -------------------------------------------------------- -->
<!-- Font Awesome Icons -->
<script src="https://use.fontawesome.com/32f6a46d51.js"></script>
<script type="module" src="./javaScript.js"></script>
</body>
</html>