-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
53 lines (45 loc) · 2.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="historyScreen">
<h3 id="historyScreen"></h3>
</div>
<div class="output">
<h3 id="output"></h3>
</div>
<div class="btns">
<!-- class='op' used for Javascript so I can target the elements in and outside of the div as it wasnt working when 'op' was a class in the div and not the icon tag -->
<button id="ac-btn" class="opStyle ac">AC</button>
<button id="cancel-btn" class="opStyle cancel">C</button>
<button id="percentage-btn" class="opStyle op" value="%">%</button>
<button id="division-btn" class="opStyle op" value="/">÷</button>
<div class="number" data-number="7">7</div>
<div class="number" data-number="8">8</div>
<div class="number" data-number="9">9</div>
<button id="multiply-btn" class="opStyle op" value="*">x</i></button>
<div class="number" data-number="4">4</div>
<div class="number" data-number="5">5</div>
<div class="number" data-number="6">6</div>
<button id="subtraction-btn" class="opStyle op" value="-">-</button>
<div class="number" data-number="1">1</div>
<div class="number" data-number="2">2</div>
<div class="number" data-number="3">3</div>
<button id="add-btn" class="opStyle op" value="+">+</button>
<div class="number num0" data-number="0">0</div>
<button id="decimal-btn" class="opStyle decimal" value='.' ><i id="decimal-btn" class="fas fa-circle decimal"></i></button>
<button id="equal-btn" class="opStyle op">=</button>
</div>
</div>
</div>
<script src="/app.js"></script>
</body>
</html>