Hugging Face's logo

Spaces:
ShivaamShukla
/
mathmaster-pro
Running

App Files Community
ShivaamShukla commited on
Commit
aad4541
·
verified ·
1 Parent(s): 5d534a6

now add advance featue in calculator so that i order calculate gst, lenght, mm, cm, tan cos inverer transpose + more becaue easy

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +772 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Mathmaster Pro
3
- emoji: 🌍
4
- colorFrom: yellow
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: MathMaster Pro
3
+ colorFrom: gray
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,773 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MathMaster Pro</title>
7
+ <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧮</text></svg>">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#6366f1',
17
+ secondary: '#8b5cf6',
18
+ dark: '#1e293b',
19
+ light: '#f8fafc'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
27
+ body {
28
+ font-family: 'Inter', sans-serif;
29
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
30
+ min-height: 100vh;
31
+ }
32
+ .calculator-btn {
33
+ transition: all 0.2s ease;
34
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
35
+ }
36
+ .calculator-btn:hover {
37
+ transform: translateY(-2px);
38
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
39
+ }
40
+ .calculator-btn:active {
41
+ transform: translateY(1px);
42
+ }
43
+ .result-display {
44
+ background: rgba(255, 255, 255, 0.1);
45
+ backdrop-filter: blur(10px);
46
+ border: 1px solid rgba(255, 255, 255, 0.2);
47
+ }
48
+ .history-item {
49
+ transition: all 0.3s ease;
50
+ }
51
+ .history-item:hover {
52
+ background: rgba(99, 102, 241, 0.1);
53
+ }
54
+ .mode-selector {
55
+ transition: all 0.3s ease;
56
+ }
57
+ .mode-selector.active {
58
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
59
+ color: white;
60
+ }
61
+ .matrix-input {
62
+ width: 50px;
63
+ height: 50px;
64
+ text-align: center;
65
+ border: 1px solid #4b5563;
66
+ background: rgba(30, 41, 59, 0.7);
67
+ color: white;
68
+ }
69
+ .matrix-input:focus {
70
+ outline: none;
71
+ border-color: #8b5cf6;
72
+ box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
73
+ }
74
+ </style>
75
+ </head>
76
+ <body class="text-light">
77
+ <div class="container mx-auto px-4 py-8">
78
+ <!-- Header -->
79
+ <header class="text-center mb-12">
80
+ <h1 class="text-4xl md:text-5xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">
81
+ MathMaster Pro 🧮
82
+ </h1>
83
+ <p class="text-gray-300 max-w-2xl mx-auto">
84
+ Advanced calculator with GST, unit conversion, trigonometry, matrix operations, and more. All in one place!
85
+ </p>
86
+ </header>
87
+
88
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
89
+ <!-- Calculator Section -->
90
+ <div class="lg:col-span-2">
91
+ <div class="bg-dark rounded-2xl p-6 shadow-xl">
92
+ <!-- Mode Selector -->
93
+ <div class="flex flex-wrap gap-2 mb-6">
94
+ <button id="basicMode" class="mode-selector active px-4 py-2 rounded-lg">Basic</button>
95
+ <button id="gstMode" class="mode-selector px-4 py-2 rounded-lg">GST</button>
96
+ <button id="unitMode" class="mode-selector px-4 py-2 rounded-lg">Unit Conversion</button>
97
+ <button id="trigMode" class="mode-selector px-4 py-2 rounded-lg">Trigonometry</button>
98
+ <button id="matrixMode" class="mode-selector px-4 py-2 rounded-lg">Matrix</button>
99
+ <button id="scientificMode" class="mode-selector px-4 py-2 rounded-lg">Scientific</button>
100
+ </div>
101
+
102
+ <!-- Display -->
103
+ <div class="result-display rounded-xl p-6 mb-6">
104
+ <div class="text-right text-gray-400 text-sm h-6 overflow-x-auto whitespace-nowrap" id="historyDisplay"></div>
105
+ <div class="text-right text-3xl font-bold mt-2 h-12 overflow-x-auto whitespace-nowrap" id="mainDisplay">0</div>
106
+ </div>
107
+
108
+ <!-- Calculator Inputs - Basic Mode -->
109
+ <div id="basicCalculator" class="calculator-grid">
110
+ <div class="grid grid-cols-4 gap-3">
111
+ <button class="calculator-btn bg-red-500 hover:bg-red-600 text-white font-bold py-4 rounded-xl" onclick="clearAll()">AC</button>
112
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="deleteLast()">DEL</button>
113
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('(')">(</button>
114
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay(')')">)</button>
115
+
116
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('7')">7</button>
117
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('8')">8</button>
118
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('9')">9</button>
119
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('/')">/</button>
120
+
121
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('4')">4</button>
122
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('5')">5</button>
123
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('6')">6</button>
124
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('*')">×</button>
125
+
126
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('1')">1</button>
127
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('2')">2</button>
128
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('3')">3</button>
129
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('-')">-</button>
130
+
131
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('0')">0</button>
132
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('.')">.</button>
133
+ <button class="calculator-btn bg-secondary hover:bg-purple-600 text-white font-bold py-4 rounded-xl" onclick="calculateResult()">=</button>
134
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('+')">+</button>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- GST Calculator -->
139
+ <div id="gstCalculator" class="hidden">
140
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
141
+ <div>
142
+ <label class="block text-gray-300 mb-2">Amount</label>
143
+ <input type="number" id="gstAmount" class="w-full p-3 rounded-lg bg-gray-800 text-white" placeholder="Enter amount">
144
+ </div>
145
+ <div>
146
+ <label class="block text-gray-300 mb-2">GST Rate (%)</label>
147
+ <select id="gstRate" class="w-full p-3 rounded-lg bg-gray-800 text-white">
148
+ <option value="5">5%</option>
149
+ <option value="12">12%</option>
150
+ <option value="18" selected>18%</option>
151
+ <option value="28">28%</option>
152
+ </select>
153
+ </div>
154
+ </div>
155
+ <div class="grid grid-cols-2 gap-4 mb-4">
156
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateGST()">Calculate GST</button>
157
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearGST()">Clear</button>
158
+ </div>
159
+ <div class="bg-gray-800 rounded-xl p-4">
160
+ <div class="flex justify-between mb-2">
161
+ <span>Net Amount:</span>
162
+ <span id="netAmount">₹0.00</span>
163
+ </div>
164
+ <div class="flex justify-between mb-2">
165
+ <span>GST Amount:</span>
166
+ <span id="gstResult">₹0.00</span>
167
+ </div>
168
+ <div class="flex justify-between font-bold text-lg">
169
+ <span>Total Amount:</span>
170
+ <span id="totalAmount">₹0.00</span>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Unit Conversion -->
176
+ <div id="unitCalculator" class="hidden">
177
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
178
+ <div>
179
+ <label class="block text-gray-300 mb-2">From</label>
180
+ <select id="fromUnit" class="w-full p-3 rounded-lg bg-gray-800 text-white">
181
+ <option value="mm">Millimeter (mm)</option>
182
+ <option value="cm" selected>Centimeter (cm)</option>
183
+ <option value="m">Meter (m)</option>
184
+ <option value="km">Kilometer (km)</option>
185
+ <option value="in">Inch (in)</option>
186
+ <option value="ft">Foot (ft)</option>
187
+ <option value="yd">Yard (yd)</option>
188
+ <option value="mi">Mile (mi)</option>
189
+ </select>
190
+ </div>
191
+ <div>
192
+ <label class="block text-gray-300 mb-2">Value</label>
193
+ <input type="number" id="unitValue" class="w-full p-3 rounded-lg bg-gray-800 text-white" placeholder="Enter value" value="1">
194
+ </div>
195
+ <div>
196
+ <label class="block text-gray-300 mb-2">To</label>
197
+ <select id="toUnit" class="w-full p-3 rounded-lg bg-gray-800 text-white">
198
+ <option value="mm">Millimeter (mm)</option>
199
+ <option value="cm">Centimeter (cm)</option>
200
+ <option value="m" selected>Meter (m)</option>
201
+ <option value="km">Kilometer (km)</option>
202
+ <option value="in">Inch (in)</option>
203
+ <option value="ft">Foot (ft)</option>
204
+ <option value="yd">Yard (yd)</option>
205
+ <option value="mi">Mile (mi)</option>
206
+ </select>
207
+ </div>
208
+ </div>
209
+ <div class="grid grid-cols-2 gap-4">
210
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="convertUnits()">Convert</button>
211
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearUnits()">Clear</button>
212
+ </div>
213
+ <div class="mt-4 text-center text-xl font-bold" id="unitResult">1 cm = 0.01 m</div>
214
+ </div>
215
+
216
+ <!-- Trigonometry -->
217
+ <div id="trigCalculator" class="hidden">
218
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
219
+ <div>
220
+ <label class="block text-gray-300 mb-2">Angle (degrees)</label>
221
+ <input type="number" id="trigAngle" class="w-full p-3 rounded-lg bg-gray-800 text-white" placeholder="Enter angle" value="45">
222
+ </div>
223
+ <div>
224
+ <label class="block text-gray-300 mb-2">Function</label>
225
+ <select id="trigFunction" class="w-full p-3 rounded-lg bg-gray-800 text-white">
226
+ <option value="sin">Sine (sin)</option>
227
+ <option value="cos">Cosine (cos)</option>
228
+ <option value="tan">Tangent (tan)</option>
229
+ <option value="asin">Arcsine (sin⁻¹)</option>
230
+ <option value="acos">Arccosine (cos⁻¹)</option>
231
+ <option value="atan">Arctangent (tan⁻¹)</option>
232
+ </select>
233
+ </div>
234
+ </div>
235
+ <div class="grid grid-cols-2 gap-4">
236
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateTrig()">Calculate</button>
237
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearTrig()">Clear</button>
238
+ </div>
239
+ <div class="mt-4 text-center text-xl font-bold" id="trigResult">sin(45°) = 0.7071</div>
240
+ </div>
241
+
242
+ <!-- Matrix Calculator -->
243
+ <div id="matrixCalculator" class="hidden">
244
+ <div class="mb-4">
245
+ <label class="block text-gray-300 mb-2">Matrix Size</label>
246
+ <div class="flex gap-2">
247
+ <select id="matrixSize" class="p-2 rounded-lg bg-gray-800 text-white">
248
+ <option value="2">2×2</option>
249
+ <option value="3" selected>3×3</option>
250
+ </select>
251
+ <select id="matrixOperation" class="p-2 rounded-lg bg-gray-800 text-white">
252
+ <option value="transpose">Transpose</option>
253
+ <option value="determinant">Determinant</option>
254
+ <option value="inverse">Inverse</option>
255
+ </select>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="mb-4">
260
+ <label class="block text-gray-300 mb-2">Matrix A</label>
261
+ <div id="matrixInputs" class="grid grid-cols-3 gap-2 justify-center">
262
+ <!-- Matrix inputs will be generated here -->
263
+ </div>
264
+ </div>
265
+
266
+ <div class="grid grid-cols-2 gap-4">
267
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateMatrix()">Calculate</button>
268
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearMatrix()">Clear</button>
269
+ </div>
270
+
271
+ <div class="mt-4">
272
+ <label class="block text-gray-300 mb-2">Result</label>
273
+ <div id="matrixResult" class="bg-gray-800 rounded-xl p-4 min-h-[100px] font-mono text-center">
274
+ Result will appear here
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Scientific Calculator -->
280
+ <div id="scientificCalculator" class="hidden">
281
+ <div class="grid grid-cols-5 gap-2 mb-4">
282
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.sqrt(')">√</button>
283
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.pow(')">x^y</button>
284
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.log(')">ln</button>
285
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.log10(')">log</button>
286
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.PI')">π</button>
287
+
288
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.E')">e</button>
289
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.sin(')">sin</button>
290
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.cos(')">cos</button>
291
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('Math.tan(')">tan</button>
292
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="appendToDisplay('!')">!</button>
293
+ </div>
294
+ <div class="grid grid-cols-4 gap-3">
295
+ <button class="calculator-btn bg-red-500 hover:bg-red-600 text-white font-bold py-4 rounded-xl" onclick="clearAll()">AC</button>
296
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="deleteLast()">DEL</button>
297
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('(')">(</button>
298
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay(')')">)</button>
299
+
300
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('7')">7</button>
301
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('8')">8</button>
302
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('9')">9</button>
303
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('/')">/</button>
304
+
305
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('4')">4</button>
306
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('5')">5</button>
307
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('6')">6</button>
308
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('*')">×</button>
309
+
310
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('1')">1</button>
311
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('2')">2</button>
312
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('3')">3</button>
313
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('-')">-</button>
314
+
315
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('0')">0</button>
316
+ <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('.')">.</button>
317
+ <button class="calculator-btn bg-secondary hover:bg-purple-600 text-white font-bold py-4 rounded-xl" onclick="calculateResult()">=</button>
318
+ <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('+')">+</button>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- History and Info Section -->
325
+ <div>
326
+ <div class="bg-dark rounded-2xl p-6 shadow-xl mb-8">
327
+ <h2 class="text-xl font-bold mb-4 flex items-center">
328
+ <i data-feather="clock" class="mr-2"></i> Calculation History
329
+ </h2>
330
+ <div id="historyList" class="max-h-96 overflow-y-auto">
331
+ <div class="text-gray-500 text-center py-8">
332
+ No calculations yet
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="bg-dark rounded-2xl p-6 shadow-xl">
338
+ <h2 class="text-xl font-bold mb-4 flex items-center">
339
+ <i data-feather="info" class="mr-2"></i> Quick Tips
340
+ </h2>
341
+ <ul class="space-y-3 text-gray-300">
342
+ <li class="flex items-start">
343
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
344
+ <span>Switch modes using the top buttons</span>
345
+ </li>
346
+ <li class="flex items-start">
347
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
348
+ <span>Use parentheses for complex expressions</span>
349
+ </li>
350
+ <li class="flex items-start">
351
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
352
+ <span>Scientific functions: sin(), cos(), tan(), sqrt(), etc.</span>
353
+ </li>
354
+ <li class="flex items-start">
355
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
356
+ <span>Matrix operations support 2×2 and 3×3 matrices</span>
357
+ </li>
358
+ </ul>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <script>
365
+ // Global variables
366
+ let currentInput = '0';
367
+ let calculationHistory = [];
368
+ let currentMode = 'basic';
369
+
370
+ // DOM Elements
371
+ const mainDisplay = document.getElementById('mainDisplay');
372
+ const historyDisplay = document.getElementById('historyDisplay');
373
+ const historyList = document.getElementById('historyList');
374
+
375
+ // Initialize calculator
376
+ document.addEventListener('DOMContentLoaded', function() {
377
+ feather.replace();
378
+ generateMatrixInputs(3);
379
+ updateDisplay();
380
+ loadHistory();
381
+ });
382
+
383
+ // Mode switching
384
+ document.querySelectorAll('.mode-selector').forEach(button => {
385
+ button.addEventListener('click', function() {
386
+ document.querySelectorAll('.mode-selector').forEach(btn => btn.classList.remove('active'));
387
+ this.classList.add('active');
388
+
389
+ // Hide all calculators
390
+ document.getElementById('basicCalculator').classList.add('hidden');
391
+ document.getElementById('gstCalculator').classList.add('hidden');
392
+ document.getElementById('unitCalculator').classList.add('hidden');
393
+ document.getElementById('trigCalculator').classList.add('hidden');
394
+ document.getElementById('matrixCalculator').classList.add('hidden');
395
+ document.getElementById('scientificCalculator').classList.add('hidden');
396
+
397
+ // Show selected calculator
398
+ currentMode = this.id.replace('Mode', '');
399
+ document.getElementById(currentMode + 'Calculator').classList.remove('hidden');
400
+ });
401
+ });
402
+
403
+ // Basic calculator functions
404
+ function appendToDisplay(value) {
405
+ if (currentInput === '0' && value !== '.') {
406
+ currentInput = value;
407
+ } else {
408
+ currentInput += value;
409
+ }
410
+ updateDisplay();
411
+ }
412
+
413
+ function clearAll() {
414
+ currentInput = '0';
415
+ updateDisplay();
416
+ }
417
+
418
+ function deleteLast() {
419
+ currentInput = currentInput.slice(0, -1);
420
+ if (currentInput === '') currentInput = '0';
421
+ updateDisplay();
422
+ }
423
+
424
+ function calculateResult() {
425
+ try {
426
+ // Replace × with * for evaluation
427
+ let expression = currentInput.replace(/×/g, '*');
428
+
429
+ // Handle special functions
430
+ expression = expression.replace(/√/g, 'Math.sqrt');
431
+ expression = expression.replace(/π/g, 'Math.PI');
432
+ expression = expression.replace(/e/g, 'Math.E');
433
+
434
+ const result = eval(expression);
435
+ addToHistory(currentInput, result);
436
+ currentInput = result.toString();
437
+ updateDisplay();
438
+ } catch (error) {
439
+ currentInput = 'Error';
440
+ updateDisplay();
441
+ setTimeout(() => {
442
+ currentInput = '0';
443
+ updateDisplay();
444
+ }, 1500);
445
+ }
446
+ }
447
+
448
+ function updateDisplay() {
449
+ mainDisplay.textContent = currentInput;
450
+ }
451
+
452
+ // GST Calculator
453
+ function calculateGST() {
454
+ const amount = parseFloat(document.getElementById('gstAmount').value) || 0;
455
+ const rate = parseFloat(document.getElementById('gstRate').value) || 0;
456
+
457
+ const gstAmount = (amount * rate) / 100;
458
+ const totalAmount = amount + gstAmount;
459
+
460
+ document.getElementById('netAmount').textContent = `₹${amount.toFixed(2)}`;
461
+ document.getElementById('gstResult').textContent = `₹${gstAmount.toFixed(2)}`;
462
+ document.getElementById('totalAmount').textContent = `₹${totalAmount.toFixed(2)}`;
463
+ }
464
+
465
+ function clearGST() {
466
+ document.getElementById('gstAmount').value = '';
467
+ document.getElementById('netAmount').textContent = '₹0.00';
468
+ document.getElementById('gstResult').textContent = '₹0.00';
469
+ document.getElementById('totalAmount').textContent = '₹0.00';
470
+ }
471
+
472
+ // Unit Conversion
473
+ function convertUnits() {
474
+ const fromUnit = document.getElementById('fromUnit').value;
475
+ const toUnit = document.getElementById('toUnit').value;
476
+ const value = parseFloat(document.getElementById('unitValue').value) || 0;
477
+
478
+ // Conversion factors to meters
479
+ const conversionFactors = {
480
+ 'mm': 0.001,
481
+ 'cm': 0.01,
482
+ 'm': 1,
483
+ 'km': 1000,
484
+ 'in': 0.0254,
485
+ 'ft': 0.3048,
486
+ 'yd': 0.9144,
487
+ 'mi': 1609.344
488
+ };
489
+
490
+ // Convert to meters first, then to target unit
491
+ const meters = value * conversionFactors[fromUnit];
492
+ const result = meters / conversionFactors[toUnit];
493
+
494
+ document.getElementById('unitResult').textContent =
495
+ `${value} ${fromUnit} = ${result.toFixed(6)} ${toUnit}`;
496
+ }
497
+
498
+ function clearUnits() {
499
+ document.getElementById('unitValue').value = '1';
500
+ document.getElementById('unitResult').textContent = '1 cm = 0.01 m';
501
+ }
502
+
503
+ // Trigonometry
504
+ function calculateTrig() {
505
+ const angle = parseFloat(document.getElementById('trigAngle').value) || 0;
506
+ const func = document.getElementById('trigFunction').value;
507
+ const radians = angle * Math.PI / 180;
508
+
509
+ let result;
510
+ switch(func) {
511
+ case 'sin':
512
+ result = Math.sin(radians);
513
+ break;
514
+ case 'cos':
515
+ result = Math.cos(radians);
516
+ break;
517
+ case 'tan':
518
+ result = Math.tan(radians);
519
+ break;
520
+ case 'asin':
521
+ result = Math.asin(angle) * 180 / Math.PI;
522
+ break;
523
+ case 'acos':
524
+ result = Math.acos(angle) * 180 / Math.PI;
525
+ break;
526
+ case 'atan':
527
+ result = Math.atan(angle) * 180 / Math.PI;
528
+ break;
529
+ }
530
+
531
+ if (func.startsWith('a')) {
532
+ document.getElementById('trigResult').textContent =
533
+ `${func}(${angle}) = ${result.toFixed(4)}°`;
534
+ } else {
535
+ document.getElementById('trigResult').textContent =
536
+ `${func}(${angle}°) = ${result.toFixed(4)}`;
537
+ }
538
+ }
539
+
540
+ function clearTrig() {
541
+ document.getElementById('trigAngle').value = '45';
542
+ document.getElementById('trigResult').textContent = 'sin(45°) = 0.7071';
543
+ }
544
+
545
+ // Matrix Calculator
546
+ function generateMatrixInputs(size) {
547
+ const container = document.getElementById('matrixInputs');
548
+ container.innerHTML = '';
549
+ container.className = `grid grid-cols-${size} gap-2 justify-center`;
550
+
551
+ for (let i = 0; i < size; i++) {
552
+ for (let j = 0; j < size; j++) {
553
+ const input = document.createElement('input');
554
+ input.type = 'number';
555
+ input.className = 'matrix-input';
556
+ input.id = `matrix-${i}-${j}`;
557
+ input.value = i === j ? '1' : '0'; // Identity matrix default
558
+ container.appendChild(input);
559
+ }
560
+ }
561
+ }
562
+
563
+ document.getElementById('matrixSize').addEventListener('change', function() {
564
+ generateMatrixInputs(parseInt(this.value));
565
+ });
566
+
567
+ function getMatrixFromInputs() {
568
+ const size = parseInt(document.getElementById('matrixSize').value);
569
+ const matrix = [];
570
+
571
+ for (let i = 0; i < size; i++) {
572
+ const row = [];
573
+ for (let j = 0; j < size; j++) {
574
+ const value = parseFloat(document.getElementById(`matrix-${i}-${j}`).value) || 0;
575
+ row.push(value);
576
+ }
577
+ matrix.push(row);
578
+ }
579
+
580
+ return matrix;
581
+ }
582
+
583
+ function calculateMatrix() {
584
+ const matrix = getMatrixFromInputs();
585
+ const operation = document.getElementById('matrixOperation').value;
586
+ let result;
587
+
588
+ try {
589
+ switch(operation) {
590
+ case 'transpose':
591
+ result = transposeMatrix(matrix);
592
+ displayMatrixResult(result, 'Transpose');
593
+ break;
594
+ case 'determinant':
595
+ result = determinant(matrix);
596
+ document.getElementById('matrixResult').innerHTML =
597
+ `Determinant = ${result.toFixed(4)}`;
598
+ break;
599
+ case 'inverse':
600
+ result = inverseMatrix(matrix);
601
+ displayMatrixResult(result, 'Inverse');
602
+ break;
603
+ }
604
+ } catch (error) {
605
+ document.getElementById('matrixResult').innerHTML =
606
+ `Error: ${error.message}`;
607
+ }
608
+ }
609
+
610
+ function transposeMatrix(matrix) {
611
+ const result = [];
612
+ for (let i = 0; i < matrix[0].length; i++) {
613
+ result[i] = [];
614
+ for (let j = 0; j < matrix.length; j++) {
615
+ result[i][j] = matrix[j][i];
616
+ }
617
+ }
618
+ return result;
619
+ }
620
+
621
+ function determinant(matrix) {
622
+ const size = matrix.length;
623
+ if (size === 2) {
624
+ return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];
625
+ }
626
+
627
+ let det = 0;
628
+ for (let i = 0; i < size; i++) {
629
+ const minor = [];
630
+ for (let j = 1; j < size; j++) {
631
+ minor.push(matrix[j].filter((_, idx) => idx !== i));
632
+ }
633
+ det += Math.pow(-1, i) * matrix[0][i] * determinant(minor);
634
+ }
635
+ return det;
636
+ }
637
+
638
+ function inverseMatrix(matrix) {
639
+ const det = determinant(matrix);
640
+ if (Math.abs(det) < 1e-10) {
641
+ throw new Error('Matrix is singular (determinant is zero)');
642
+ }
643
+
644
+ const size = matrix.length;
645
+ if (size === 2) {
646
+ return [
647
+ [matrix[1][1]/det, -matrix[0][1]/det],
648
+ [-matrix[1][0]/det, matrix[0][0]/det]
649
+ ];
650
+ }
651
+
652
+ // For 3x3 matrices, use adjugate method
653
+ const cofactor = [];
654
+ for (let i = 0; i < size; i++) {
655
+ cofactor[i] = [];
656
+ for (let j = 0; j < size; j++) {
657
+ const minor = [];
658
+ for (let k = 0; k < size; k++) {
659
+ if (k !== i) {
660
+ minor.push(matrix[k].filter((_, idx) => idx !== j));
661
+ }
662
+ }
663
+ cofactor[i][j] = Math.pow(-1, i+j) * determinant(minor);
664
+ }
665
+ }
666
+
667
+ const adjugate = transposeMatrix(cofactor);
668
+ return adjugate.map(row => row.map(val => val/det));
669
+ }
670
+
671
+ function displayMatrixResult(matrix, operation) {
672
+ let html = `<div class="text-center mb-2">${operation}:</div>`;
673
+ html += '<div class="grid gap-1 justify-center" style="grid-template-columns: repeat(' + matrix[0].length + ', auto);">';
674
+
675
+ for (let i = 0; i < matrix.length; i++) {
676
+ for (let j = 0; j < matrix[i].length; j++) {
677
+ html += `<div class="matrix-input bg-gray-700">${matrix[i][j].toFixed(2)}</div>`;
678
+ }
679
+ }
680
+
681
+ html += '</div>';
682
+ document.getElementById('matrixResult').innerHTML = html;
683
+ }
684
+
685
+ function clearMatrix() {
686
+ const size = parseInt(document.getElementById('matrixSize').value);
687
+ for (let i = 0; i < size; i++) {
688
+ for (let j = 0; j < size; j++) {
689
+ document.getElementById(`matrix-${i}-${j}`).value = i === j ? '1' : '0';
690
+ }
691
+ }
692
+ document.getElementById('matrixResult').innerHTML = 'Result will appear here';
693
+ }
694
+
695
+ // History functions
696
+ function addToHistory(expression, result) {
697
+ const historyItem = {
698
+ expression: expression,
699
+ result: result,
700
+ timestamp: new Date()
701
+ };
702
+
703
+ calculationHistory.unshift(historyItem);
704
+ if (calculationHistory.length > 20) {
705
+ calculationHistory.pop();
706
+ }
707
+
708
+ saveHistory();
709
+ updateHistoryDisplay();
710
+ }
711
+
712
+ function updateHistoryDisplay() {
713
+ if (calculationHistory.length === 0) {
714
+ historyList.innerHTML = '<div class="text-gray-500 text-center py-8">No calculations yet</div>';
715
+ return;
716
+ }
717
+
718
+ let html = '';
719
+ calculationHistory.forEach((item, index) => {
720
+ html += `
721
+ <div class="history-item p-3 rounded-lg mb-2 cursor-pointer hover:bg-gray-800"
722
+ onclick="loadHistoryItem(${index})">
723
+ <div class="font-mono text-sm">${item.expression} =</div>
724
+ <div class="font-mono font-bold">${item.result}</div>
725
+ <div class="text-xs text-gray-500 mt-1">
726
+ ${item.timestamp.toLocaleTimeString()}
727
+ </div>
728
+ </div>
729
+ `;
730
+ });
731
+
732
+ historyList.innerHTML = html;
733
+ }
734
+
735
+ function loadHistoryItem(index) {
736
+ const item = calculationHistory[index];
737
+ currentInput = item.result.toString();
738
+ updateDisplay();
739
+ }
740
+
741
+ function saveHistory() {
742
+ localStorage.setItem('calculatorHistory', JSON.stringify(calculationHistory));
743
+ }
744
+
745
+ function loadHistory() {
746
+ const saved = localStorage.getItem('calculatorHistory');
747
+ if (saved) {
748
+ calculationHistory = JSON.parse(saved);
749
+ updateHistoryDisplay();
750
+ }
751
+ }
752
+
753
+ // Keyboard support
754
+ document.addEventListener('keydown', function(event) {
755
+ if (currentMode === 'basic' || currentMode === 'scientific') {
756
+ const key = event.key;
757
+
758
+ if (key >= '0' && key <= '9' || key === '.' || key === '+' || key === '-' || key === '*' || key === '/') {
759
+ appendToDisplay(key === '*' ? '×' : key);
760
+ } else if (key === 'Enter' || key === '=') {
761
+ calculateResult();
762
+ } else if (key === 'Escape') {
763
+ clearAll();
764
+ } else if (key === 'Backspace') {
765
+ deleteLast();
766
+ } else if (key === '(' || key === ')') {
767
+ appendToDisplay(key);
768
+ }
769
+ }
770
+ });
771
+ </script>
772
+ </body>
773
  </html>