-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (123 loc) · 7.23 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
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<title>Scientific Calculator</title>
</head>
<body>
<!-- Calculator container -->
<div class="calculator">
<div class="screen">
<input type="text" name="ansDisplay" id="ansDisplay" inputmode="none" autofocus spellcheck="false" oninput="checkOverflow()">
</div>
<!-- Buttons container -->
<div class="btns">
<div class="row">
<button class="hidden inv">sin<sup style="display: none;">-1</sup></button>
<button class="hidden inv">cos<sup style="display: none;">-1</sup></button>
<button class="hidden inv">tan<sup style="display: none;">-1</sup></button>
<button class="hidden" id="factorial">x<i>!</i></button>
<button class="hidden smallFont" style="line-height: 0.6rem;margin-right: 2.6px;" id="history"><img src="images/history.png" width="14.5rem" alt="history"></button>
</div>
<div class="row">
<button class="hidden">ln</button>
<button class="hidden" onclick="handleDegRad('deg')" id="deg">deg</button>
<button class="hidden" onclick="handleDegRad('rad')" id="rad">rad</button>
<button class="hidden smallFont"><sup>n</sup>P<sub>r</sub></button>
<button class="hidden smallFont" style="margin-right: 2.6px;"><sup>n</sup>C<sub>r</sub></button>
</div>
<div class="row">
<button class="hidden" id="inverseBtn">inv</button>
<button class="simpleCalcTopBtns" style="line-height: 0.5rem;" id="moreBtns"><img src="images/moreBtns.png" width="15rem" alt="More"></button>
<button class="simpleCalcTopBtns">(</button>
<button class="simpleCalcTopBtns">)</button>
<button class="simpleCalcTopBtns" style="line-height: 0.6rem;margin-right: 2.6px;" id="settingBtn" title="Setting"><img src="images/setting.png" id="setting" width="15rem" alt="Setting"></button>
</div>
<div class="row">
<button class="hidden smallFont">e<sup>x</sup></button>
<button class="simpleCalcBtns" id="allClear">AC</button>
<button class="simpleCalcBtns" id="sqrt"><i class="fa-solid fa-square-root-variable" style="color: #000000;"></i></button>
<button class="simpleCalcBtns" id="exponential" style="line-height: normal;">x<sup>y</sup></button>
<button class="simpleCalcBtns" style="margin-right: 2.6px;"><img src="images/backspace.png" id="del" width="17rem" alt="Del"></button>
</div>
<div class="row">
<button class="hidden">log</button>
<button class="simpleCalcBtns">7</button>
<button class="simpleCalcBtns">8</button>
<button class="simpleCalcBtns">9</button>
<button class="simpleCalcBtns" style="margin-right: 2.6px;"><i class="fa-solid fa-divide" style="color: #000000;"></i></button>
</div>
<div class="row">
<button class="hidden" style="line-height: normal;">10<sup>x</sup></button>
<button class="simpleCalcBtns">4</button>
<button class="simpleCalcBtns">5</button>
<button class="simpleCalcBtns">6</button>
<button class="simpleCalcBtns" style="margin-right: 2.6px;">x</button>
</div>
<div class="row">
<button class="hidden" id="pi"><img src="images/pi-number.png" width="10rem" alt="pi"></button>
<button class="simpleCalcBtns">1</button>
<button class="simpleCalcBtns">2</button>
<button class="simpleCalcBtns">3</button>
<button class="simpleCalcBtns" style="margin-right: 2.6px;"><i class="fa-solid fa-minus" style="color: #000000;"></i></button>
</div>
<div class="row">
<button class="hidden">e</button>
<button class="simpleCalcBtns">.</button>
<button class="simpleCalcBtns">0</button>
<button class="simpleCalcBtns">=</button>
<button class="simpleCalcBtns" style="margin-right: 2.6px;">+</button>
</div>
<div id="historyDiv" style="display: none;">
<div class="topButtons">
<div class="histBtns">Back</div>
<div class="histBtns">Clear history</div>
</div>
<div id="allRows">
<!-- <div class="rows">
<div class="expression">4+4</div>
<div class="answer">8</div>
</div> -->
</div>
</div>
</div>
</div>
<!-- Pop up for settings -->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="topRight">
<h2 class="close-button" onclick="closeModal()">X</h2>
</div>
<div class="remaining">
<div class="settings-panel">
<div class="setting">
<span>Show All Buttons by Default</span>
<div class="toggle" id="buttons-visible-toggle"></div>
</div>
<div class="setting">
<span>Set Radians as Default Angle Unit</span>
<div class="toggle" id="radian-toggle"></div>
</div>
<div class="setting">
<span>Show Inverse Trigonometry by Default</span>
<div class="toggle" id="inverse-trig-toggle"></div>
</div>
<div class="setting" style="margin-bottom: 0px;">
<span>Set Precision (For Decimal Values)</span>
<div class="precision-control">
<span id="precision-decrease" class="precision-button">-</span>
<span id="precision-value"></span>
<span id="precision-increase" class="precision-button">+</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>