-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (128 loc) · 5.98 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
133
134
135
136
137
138
139
<!--Basic Interactive Calculator-->
<!--Made By: Krisha Botadara-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Calculator</title>
<link rel="stylesheet" type="text/css" href="Style.css"> <!--Linking CSS stylesheet-->
</head>
<body>
<!--Heading of the webpage-->
<div id="heading">
My Calculator...
</div>
<!---Three different types of modes: dark, neutral, and light-->
<!---Clicking on the button lets the user change to their desired mode-->
<div class="mode">
<button onclick="Dark()" id="dark">Dark</button>
<button onclick="Neutral()" id="neutral">Neutral</button>
<button onclick="Light()" id="light">Light</button>
</div>
<!--The calculator is divided into 2 major elements including display and buttons-->
<!--The buttons include numbers and operators-->
<div id="calculator">
<br><br>
<!--class main includes display and = sign-->
<!--class number includes number buttons and decimal point-->
<!--class operator includes arithmetric operators like +, *, etc-->
<!--class function includes delete, clear, and answer-->
<!--This will be the initial text in the display of the calculator-->
<div id="display" class="main">#MADE BY: KRISHA</div>
<!--First Row of the Calculator-->
<div class="buttons">
<!--Created button 7 with its audio file-->
<div id="n7" class="number">7
<audio id="audioSeven" src="Audio Recordings/seven.mp4"></audio>
</div>
<!--Created button 8 with its audio file-->
<div id="n8" class="number">8
<audio id="audioEight" src="Audio Recordings/eight.mp4"></audio>
</div>
<!--Created button 9 with its audio file-->
<div id="n9" class="number">9
<audio id="audioNine" src="Audio Recordings/nine.mp4"></audio>
</div>
<!--Created button DEL (Delete) with its audio file-->
<div id="del" class="function">DEL
<audio id="audioDelete" src="Audio Recordings/delete.mp4"></audio>
</div>
<!--Created button CLR (Clear) with its audio file-->
<div id="clr" class="function">CLR
<audio id="audioClear" src="Audio Recordings/clear.mp4"></audio>
</div>
</div>
<!--Second Row of the Calculator-->
<div class="buttons">
<!--Created button 4 with its audio file-->
<div id="n4" class="number">4
<audio id="audioFour" src="Audio Recordings/four.mp4"></audio>
</div>
<!--Created button 5 with its audio file-->
<div id="n5" class="number">5
<audio id="audioFive" src="Audio Recordings/five.mp4"></audio>
</div>
<!--Created button 6 with its audio file-->
<div id="n6" class="number">6
<audio id="audioSix" src="Audio Recordings/six.mp4"></audio>
</div>
<!--Created button Multiplication with its audio file-->
<div id="mul" class="operator">x
<audio id="audioTimes" src="Audio Recordings/times.mp4"></audio>
</div>
<!--Created button Division with its audio file-->
<div id="div" class="operator">÷
<audio id="audioDivide" src="Audio Recordings/divided by.mp4"></audio>
</div>
</div>
<!--Third Row of the Calculator-->
<div class="buttons">
<!--Created button 1 with its audio file-->
<div id="n1" class="number">1
<audio id="audioOne" src="Audio Recordings/one.mp4"></audio>
</div>
<!--Created button 2 with its audio file-->
<div id="n2" class="number">2
<audio id="audioTwo" src="Audio Recordings/two.mp4"></audio>
</div>
<!--Created button 3 with its audio file-->
<div id="n3" class="number">3
<audio id="audioThree" src="Audio Recordings/three.mp4"></audio>
</div>
<!--Created button Addition with its audio file-->
<div id="add" class="operator">+
<audio id="audioPlus" src="Audio Recordings/plus.mp4"></audio>
</div>
<!--Created button Subtraction with its audio file-->
<div id="sub" class="operator">-
<audio id="audioMinus" src="Audio Recordings/minus.mp4"></audio>
</div>
</div>
<!--Fourth Row of the Calculator-->
<div class="buttons">
<!--Created button 0 with its audio file-->
<div id="n0" class="number">0
<audio id="audioZero" src="Audio Recordings/zero.mp4"></audio>
</div>
<!--Created button decimal point with its audio file-->
<div id="point" class="number">.
<audio id="audioPoint" src="Audio Recordings/point.mp4"></audio>
</div>
<!--Created button Answer with its audio file-->
<div id="ans" class="function">ANS
<audio id="audioAnswer" src="Audio Recordings/answer.mp4"></audio>
</div>
<!--Created button Percentage with its audio file-->
<div id="percent" class="operator">%
<audio id="audioPercentage" src="Audio Recordings/percentage.mp4"></audio>
</div>
<!--Created button Equals to with its audio file-->
<div id="equal" class="main">=
<audio id="audioEquals" src="Audio Recordings/equals to.mp4"></audio>
</div>
</div>
</div>
<script src="JavaScript.js"></script> <!--Linking JavaScript-->
</body>
</html>