-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (104 loc) · 5.5 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
<!-- /*
* jsCalculator
*----------------------------------
* Copyright (c) 2011-2019 Robust Horses LTD (https://github.com/yerbestpal)
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public
* License as published by the Free Software Foundation; either
* version 2 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
* Boston, MA 02110-1301 USA
*
* Authored by: Ross McLean <[email protected]>
*/ -->
<!--This application demonstrates the use of CSS Grid to build
a calculator app that takes user input.
GUI taken entirely from https://freshman.tech/css-grid-calculator/-->
<html>
<head>
<title>jsCalculator</title>
<script src="functions.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- fontawesome import -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
<!-- noto sans/open sans import -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans|Open+Sans"
rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="title">js
<i class="fas fa-calculator"></i>
</div>
<div class="links">
<a href="https://github.com/yerbestpal/jscalculator">
<i class="fab fa-github"></i>
</a>
</div>
</div>
<div class="content">
<div class="body-text">
<p>A simple calculator written with Javascript.</p>
<p>Check it out on Github to help me improve it.</p>
<p>Front-end taken entirely from <a href="https://freshman.tech/css-grid-calculator/">this guide</a>
by Ayo Isaiah.</p>
<br>
<p>Try typing!</p>
<br>
<div class="instructions">
<ul>
<li>c <em>clear all</em></li>
<li>= <em>add</em></li>
<li>- <em>subtract</em></li>
<li>x <em>multiply</em></li>
<li>/ <em>divide</em></li>
<li>Enter <em>calculate</em></li>
</ul>
</div>
</div>
<div class="calulator-container">
<div class="calculator">
<!-- this is the display that shows the sum being built above the main screen -->
<div id="sum-string-display"></div>
<!--A disabled input element is unusable and un-clickable.-->
<input type="text" class="calculator-screen" id="screen"
value="0" disabled><div class="calculator-keys">
<button class="operator" id="plus" value="+" onclick="setOperator('+');">+</button>
<button class="operator" id="minus" value="-" onclick="setOperator('-');">-</button>
<button class="operator" id="multiply" value="*" onclick="setOperator('*');">*</button>
<button class="operator" id="divide" value="/" onclick="setOperator('/');">/</button>
<button value="7" id="seven" onclick="returnNumber(7);">7</button>
<button value="8" id="eight" onclick="returnNumber(8);">8</button>
<button value="9" id="nine" onclick="returnNumber(9);">9</button>
<button value="4" id="four" onclick="returnNumber(4);">4</button>
<button value="5" id="five" onclick="returnNumber(5);">5</button>
<button value="6" id="six" onclick="returnNumber(6);">6</button>
<button value="1" id="one" onclick="returnNumber(1);">1</button>
<button value="2" id="two" onclick="returnNumber(2);">2</button>
<button value="3" id="three" onclick="returnNumber(3);">3</button>
<button value="0" id="zero" onclick="returnNumber(0);">0</button>
<button class="decimal" value=".">.</button>
<button class="all-clear" value="all-clear" onclick="clearAll();">AC</button>
<button class="equals-sign" value="=" onclick="equals();">=</button>
</div>
</div>
</div>
</div>
<div class="footer">
<p>Copyright Ross McLean 2019</p>
</div>
</div>
</body>
</html>