kokofixcomputers commited on
Commit
5188b4a
·
verified ·
1 Parent(s): 67e5dc2

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +672 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Scientificcalculator
3
- emoji: 🦀
4
- colorFrom: yellow
5
- colorTo: purple
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: scientificcalculator
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,672 @@
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>Modern Scientific Calculator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .sidebar {
11
+ transform: translateX(-100%);
12
+ transition: transform 0.3s ease;
13
+ }
14
+ .sidebar.open {
15
+ transform: translateX(0);
16
+ }
17
+ .calculator-btn {
18
+ transition: all 0.2s ease;
19
+ transform: scale(1);
20
+ }
21
+ .calculator-btn:active {
22
+ transform: scale(0.95);
23
+ }
24
+ .history-item:hover {
25
+ background-color: rgba(255, 255, 255, 0.1);
26
+ cursor: pointer;
27
+ }
28
+ .scrollbar-hide::-webkit-scrollbar {
29
+ display: none;
30
+ }
31
+ .scrollbar-hide {
32
+ -ms-overflow-style: none;
33
+ scrollbar-width: none;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4">
38
+ <div class="w-full max-w-md">
39
+ <div class="bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
40
+ <!-- Display Area -->
41
+ <div class="p-4">
42
+ <div class="flex justify-between items-center mb-2">
43
+ <h1 class="text-xl font-bold text-blue-400">Scientific Calculator</h1>
44
+ <div class="flex space-x-2">
45
+ <button id="sidebar-toggle" class="text-gray-300 hover:text-white">
46
+ <i class="fas fa-sliders-h"></i>
47
+ </button>
48
+ <button id="theme-toggle" class="text-gray-300 hover:text-white">
49
+ <i class="fas fa-moon"></i>
50
+ </button>
51
+ </div>
52
+ </div>
53
+
54
+ <div class="bg-gray-700 rounded-lg p-3 mb-2">
55
+ <div id="history-display" class="text-gray-400 text-sm h-6 overflow-x-auto whitespace-nowrap scrollbar-hide"></div>
56
+ <div id="display" class="text-right text-3xl font-semibold break-all">0</div>
57
+ </div>
58
+
59
+ <div class="flex space-x-2 mb-2">
60
+ <button id="clear" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex-1 calculator-btn">AC</button>
61
+ <button id="backspace" class="bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded-lg calculator-btn">
62
+ <i class="fas fa-backspace"></i>
63
+ </button>
64
+ <button id="percentage" class="bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded-lg calculator-btn">%</button>
65
+ <button id="divide" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg calculator-btn">÷</button>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Main Calculator -->
70
+ <div class="grid grid-cols-4 gap-2 p-4">
71
+ <!-- Row 1 -->
72
+ <button data-value="7" class="bg-gray-700 hover:bg-gray-600 text-white text-xl p-3 rounded-lg calculator-btn">7</button>
73
+ <button data-value="8" class="bg-gray-700 hover:bg-gray-600 text-white text-xl p-3 rounded-lg calculator-btn">8</button>
74
+ <button data-value="9" class="bg-gray-700 hover:bg-gray-600 text-white text-xl p-3 rounded-lg calculator-btn">9</button>
75
+ <button id="multiply" class="bg-blue-500 hover:bg-blue-600 text-white text-xl p-3 rounded-lg calculator-btn">×</button>
76
+
77
+ <!-- Row 2 -->
78
+ <button data-value="4" class="bg-gray-700 hover:bg-gray-600 text-white text-xl p-3 rounded-lg calculator-btn">4</button>
79
+ <button data-value="5" class="bg-gray-700 hover:bg-gray-600 text-white text-xl p-3 rounded-lg calculator-btn">5</button>
80
+ <button data-value="6" class="bg-gray-700 hover:bg-gray-600 text-white text-xl p-3 rounded-lg calculator-btn">6</button>
81
+ <button id="subtract" class="bg-blue-500 hover:bg-blue-600 text-white text-xl p-3 rounded-lg calculator-btn">-</button>
82
+
83
+ <!-- Row 3 -->
84
+ <button data-value="1" class="bg-gray-700 hover:bg-gray-600 text-white text-xl p-3 rounded-lg calculator-btn">1</button>
85
+ <button data-value="2" class="bg-gray-700 hover:bg-gray-600 text-white text-xl p-3 rounded-lg calculator-btn">2</button>
86
+ <button data-value="3" class="bg-gray-700 hover:bg-gray-600 text-white text-xl p-3 rounded-lg calculator-btn">3</button>
87
+ <button id="add" class="bg-blue-500 hover:bg-blue-600 text-white text-xl p-3 rounded-lg calculator-btn">+</button>
88
+
89
+ <!-- Row 4 -->
90
+ <button id="decimal" class="bg-gray-700 hover:bg-gray-600 text-white text-xl p-3 rounded-lg calculator-btn">.</button>
91
+ <button data-value="0" class="bg-gray-700 hover:bg-gray-600 text-white text-xl p-3 rounded-lg calculator-btn">0</button>
92
+ <button id="equals" class="bg-green-500 hover:bg-green-600 text-white text-xl p-3 rounded-lg calculator-btn">=</button>
93
+ <button id="sqrt" class="bg-purple-500 hover:bg-purple-600 text-white text-xl p-3 rounded-lg calculator-btn">√</button>
94
+
95
+ <!-- Scientific Functions Row -->
96
+ <button id="power" class="bg-purple-500 hover:bg-purple-600 text-white text-xl p-3 rounded-lg calculator-btn">x^y</button>
97
+ <button id="sin" class="bg-purple-500 hover:bg-purple-600 text-white text-xl p-3 rounded-lg calculator-btn">sin</button>
98
+ <button id="cos" class="bg-purple-500 hover:bg-purple-600 text-white text-xl p-3 rounded-lg calculator-btn">cos</button>
99
+ <button id="tan" class="bg-purple-500 hover:bg-purple-600 text-white text-xl p-3 rounded-lg calculator-btn">tan</button>
100
+
101
+ <!-- More Functions Row -->
102
+ <button id="log" class="bg-purple-500 hover:bg-purple-600 text-white text-xl p-3 rounded-lg calculator-btn">log</button>
103
+ <button id="ln" class="bg-purple-500 hover:bg-purple-600 text-white text-xl p-3 rounded-lg calculator-btn">ln</button>
104
+ <button id="pi" class="bg-purple-500 hover:bg-purple-600 text-white text-xl p-3 rounded-lg calculator-btn">π</button>
105
+ <button id="factorial" class="bg-purple-500 hover:bg-purple-600 text-white text-xl p-3 rounded-lg calculator-btn">n!</button>
106
+ </div>
107
+
108
+ <!-- Scientific Sidebar -->
109
+ <div id="sidebar" class="sidebar absolute top-0 left-0 w-64 h-full bg-gray-800 z-10 p-4 overflow-y-auto">
110
+ <div class="flex justify-between items-center mb-4">
111
+ <h2 class="text-lg font-semibold text-blue-400">Scientific Functions</h2>
112
+ <button id="close-sidebar" class="text-gray-300 hover:text-white">
113
+ <i class="fas fa-times"></i>
114
+ </button>
115
+ </div>
116
+
117
+ <div class="grid grid-cols-2 gap-2 mb-4">
118
+ <button id="cube-root" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded calculator-btn">∛</button>
119
+ <button id="nth-root" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded calculator-btn">ⁿ√</button>
120
+ <button id="gcd" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded calculator-btn">GCD</button>
121
+ <button id="lcm" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded calculator-btn">LCM</button>
122
+ <button id="abs" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded calculator-btn">|x|</button>
123
+ <button id="exp" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded calculator-btn">e^x</button>
124
+ <button id="mod" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded calculator-btn">mod</button>
125
+ <button id="rand" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded calculator-btn">Rand</button>
126
+ </div>
127
+
128
+ <div class="mb-4">
129
+ <h3 class="text-md font-semibold text-blue-400 mb-2">Parentheses</h3>
130
+ <div class="grid grid-cols-2 gap-2">
131
+ <button id="open-paren" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded calculator-btn">(</button>
132
+ <button id="close-paren" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded calculator-btn">)</button>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="mb-4">
137
+ <h3 class="text-md font-semibold text-blue-400 mb-2">Constants</h3>
138
+ <div class="grid grid-cols-2 gap-2">
139
+ <button id="e" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded calculator-btn">e</button>
140
+ <button id="phi" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded calculator-btn">φ</button>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- History Panel -->
146
+ <div class="bg-gray-700 p-4 border-t border-gray-600">
147
+ <div class="flex justify-between items-center mb-2">
148
+ <h2 class="text-lg font-semibold text-blue-400">History</h2>
149
+ <button id="clear-history" class="text-gray-300 hover:text-white text-sm">Clear</button>
150
+ </div>
151
+ <div id="history-list" class="max-h-40 overflow-y-auto scrollbar-hide space-y-1"></div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <script>
157
+ document.addEventListener('DOMContentLoaded', function() {
158
+ // Calculator state
159
+ let currentInput = '0';
160
+ let previousInput = '';
161
+ let operation = null;
162
+ let resetInput = false;
163
+ let calculationHistory = [];
164
+
165
+ // DOM elements
166
+ const display = document.getElementById('display');
167
+ const historyDisplay = document.getElementById('history-display');
168
+ const historyList = document.getElementById('history-list');
169
+ const themeToggle = document.getElementById('theme-toggle');
170
+ const clearHistoryBtn = document.getElementById('clear-history');
171
+
172
+ // Number buttons
173
+ const numberButtons = document.querySelectorAll('[data-value]');
174
+
175
+ // Operation buttons
176
+ const addButton = document.getElementById('add');
177
+ const subtractButton = document.getElementById('subtract');
178
+ const multiplyButton = document.getElementById('multiply');
179
+ const divideButton = document.getElementById('divide');
180
+ const equalsButton = document.getElementById('equals');
181
+ const clearButton = document.getElementById('clear');
182
+ const backspaceButton = document.getElementById('backspace');
183
+ const decimalButton = document.getElementById('decimal');
184
+ const percentageButton = document.getElementById('percentage');
185
+
186
+ // Scientific functions
187
+ const sqrtButton = document.getElementById('sqrt');
188
+ const powerButton = document.getElementById('power');
189
+ const sinButton = document.getElementById('sin');
190
+ const cosButton = document.getElementById('cos');
191
+ const tanButton = document.getElementById('tan');
192
+ const logButton = document.getElementById('log');
193
+ const lnButton = document.getElementById('ln');
194
+ const piButton = document.getElementById('pi');
195
+ const factorialButton = document.getElementById('factorial');
196
+
197
+ // Initialize
198
+ updateDisplay();
199
+
200
+ // Theme toggle
201
+ themeToggle.addEventListener('click', toggleTheme);
202
+
203
+ // Clear history
204
+ clearHistoryBtn.addEventListener('click', clearHistory);
205
+
206
+ // Number buttons
207
+ numberButtons.forEach(button => {
208
+ button.addEventListener('click', () => {
209
+ appendNumber(button.getAttribute('data-value'));
210
+ });
211
+ });
212
+
213
+ // Operation buttons
214
+ addButton.addEventListener('click', () => setOperation('+'));
215
+ subtractButton.addEventListener('click', () => setOperation('-'));
216
+ multiplyButton.addEventListener('click', () => setOperation('×'));
217
+ divideButton.addEventListener('click', () => setOperation('÷'));
218
+ equalsButton.addEventListener('click', compute);
219
+ clearButton.addEventListener('click', clear);
220
+ backspaceButton.addEventListener('click', backspace);
221
+ decimalButton.addEventListener('click', appendDecimal);
222
+ percentageButton.addEventListener('click', percentage);
223
+
224
+ // Sidebar toggle
225
+ const sidebarToggle = document.getElementById('sidebar-toggle');
226
+ const closeSidebar = document.getElementById('close-sidebar');
227
+ const sidebar = document.getElementById('sidebar');
228
+
229
+ sidebarToggle.addEventListener('click', () => {
230
+ sidebar.classList.add('open');
231
+ });
232
+
233
+ closeSidebar.addEventListener('click', () => {
234
+ sidebar.classList.remove('open');
235
+ });
236
+
237
+ // Scientific functions
238
+ sqrtButton.addEventListener('click', () => appendFunction('√('));
239
+ powerButton.addEventListener('click', () => setOperation('^'));
240
+ sinButton.addEventListener('click', () => applyFunction('sin'));
241
+ cosButton.addEventListener('click', () => applyFunction('cos'));
242
+ tanButton.addEventListener('click', () => applyFunction('tan'));
243
+ logButton.addEventListener('click', () => applyFunction('log'));
244
+ lnButton.addEventListener('click', () => applyFunction('ln'));
245
+ piButton.addEventListener('click', appendPi);
246
+ factorialButton.addEventListener('click', factorial);
247
+
248
+ // Keyboard support
249
+ document.addEventListener('keydown', handleKeyboardInput);
250
+
251
+ // Functions
252
+ function toggleTheme() {
253
+ document.body.classList.toggle('bg-gray-100');
254
+ document.body.classList.toggle('text-gray-900');
255
+ document.body.classList.toggle('bg-gray-900');
256
+ document.body.classList.toggle('text-white');
257
+
258
+ const calculator = document.querySelector('.bg-gray-800');
259
+ calculator.classList.toggle('bg-gray-800');
260
+ calculator.classList.toggle('bg-white');
261
+
262
+ const displayBg = document.querySelector('.bg-gray-700');
263
+ displayBg.classList.toggle('bg-gray-700');
264
+ displayBg.classList.toggle('bg-gray-100');
265
+
266
+ const buttons = document.querySelectorAll('.bg-gray-600, .bg-gray-700');
267
+ buttons.forEach(btn => {
268
+ btn.classList.toggle('bg-gray-600');
269
+ btn.classList.toggle('bg-gray-700');
270
+ btn.classList.toggle('bg-gray-200');
271
+ btn.classList.toggle('bg-gray-300');
272
+ btn.classList.toggle('text-white');
273
+ btn.classList.toggle('text-gray-900');
274
+ });
275
+
276
+ const icon = themeToggle.querySelector('i');
277
+ if (icon.classList.contains('fa-moon')) {
278
+ icon.classList.remove('fa-moon');
279
+ icon.classList.add('fa-sun');
280
+ } else {
281
+ icon.classList.remove('fa-sun');
282
+ icon.classList.add('fa-moon');
283
+ }
284
+ }
285
+
286
+ function clearHistory() {
287
+ calculationHistory = [];
288
+ updateHistoryList();
289
+ }
290
+
291
+ function appendNumber(number) {
292
+ if (currentInput === '0' || resetInput) {
293
+ currentInput = number;
294
+ resetInput = false;
295
+ } else {
296
+ currentInput += number;
297
+ }
298
+ updateDisplay();
299
+ }
300
+
301
+ function appendDecimal() {
302
+ if (resetInput) {
303
+ currentInput = '0.';
304
+ resetInput = false;
305
+ return;
306
+ }
307
+
308
+ if (currentInput.indexOf('.') === -1) {
309
+ currentInput += '.';
310
+ }
311
+ updateDisplay();
312
+ }
313
+
314
+ function appendPi() {
315
+ if (currentInput !== '0' && !resetInput) {
316
+ currentInput += Math.PI.toString();
317
+ } else {
318
+ currentInput = Math.PI.toString();
319
+ resetInput = false;
320
+ }
321
+ updateDisplay();
322
+ }
323
+
324
+ function setOperation(op) {
325
+ if (currentInput === '0' && previousInput && !resetInput) {
326
+ operation = op;
327
+ updateDisplay();
328
+ return;
329
+ }
330
+
331
+ if (operation && !resetInput) {
332
+ compute();
333
+ }
334
+
335
+ previousInput = currentInput;
336
+ operation = op;
337
+ resetInput = true;
338
+ updateDisplay();
339
+ }
340
+
341
+ function compute() {
342
+ try {
343
+ // Replace display symbols with JS-compatible ones
344
+ let expression = currentInput
345
+ .replace(/×/g, '*')
346
+ .replace(/÷/g, '/')
347
+ .replace(/√\(/g, 'Math.sqrt(')
348
+ .replace(/∛\(/g, 'Math.cbrt(')
349
+ .replace(/\^/g, '**')
350
+ .replace(/mod/g, '%')
351
+ .replace(/abs\(/g, 'Math.abs(')
352
+ .replace(/exp\(/g, 'Math.exp(')
353
+ .replace(/log\(/g, 'Math.log10(')
354
+ .replace(/ln\(/g, 'Math.log(')
355
+ .replace(/sin\(/g, 'Math.sin(')
356
+ .replace(/cos\(/g, 'Math.cos(')
357
+ .replace(/tan\(/g, 'Math.tan(')
358
+ .replace(/π/g, 'Math.PI')
359
+ .replace(/φ/g, '((1 + Math.sqrt(5)) / 2)')
360
+ .replace(/e/g, 'Math.E');
361
+
362
+ // Handle factorial (must be done after other replacements)
363
+ expression = expression.replace(/(\d+)!/g, function(match, num) {
364
+ let n = parseInt(num);
365
+ if (n < 0) return 'NaN';
366
+ let result = 1;
367
+ for (let i = 2; i <= n; i++) result *= i;
368
+ return result;
369
+ });
370
+
371
+ // Handle gcd and lcm (simple implementations)
372
+ expression = expression.replace(/gcd\(([^,]+),([^)]+)\)/g, function(match, a, b) {
373
+ a = parseFloat(a);
374
+ b = parseFloat(b);
375
+ while (b) [a, b] = [b, a % b];
376
+ return a;
377
+ });
378
+
379
+ expression = expression.replace(/lcm\(([^,]+),([^)]+)\)/g, function(match, a, b) {
380
+ a = parseFloat(a);
381
+ b = parseFloat(b);
382
+ return (a * b) / gcd(a, b);
383
+ });
384
+
385
+ // Evaluate the expression
386
+ const computation = eval(expression);
387
+
388
+ switch (operation) {
389
+ case '+':
390
+ computation = prev + current;
391
+ break;
392
+ case '-':
393
+ computation = prev - current;
394
+ break;
395
+ case '×':
396
+ computation = prev * current;
397
+ break;
398
+ case '÷':
399
+ computation = prev / current;
400
+ break;
401
+ case '^':
402
+ computation = Math.pow(prev, current);
403
+ break;
404
+ default:
405
+ return;
406
+ }
407
+
408
+ // Add to history
409
+ const historyEntry = {
410
+ expression: `${previousInput} ${operation} ${currentInput}`,
411
+ result: computation.toString()
412
+ };
413
+ calculationHistory.unshift(historyEntry);
414
+ if (calculationHistory.length > 10) {
415
+ calculationHistory.pop();
416
+ }
417
+
418
+ currentInput = computation.toString();
419
+ operation = null;
420
+ resetInput = true;
421
+
422
+ updateDisplay();
423
+ updateHistoryList();
424
+ }
425
+
426
+ function clear() {
427
+ currentInput = '0';
428
+ previousInput = '';
429
+ operation = null;
430
+ updateDisplay();
431
+ }
432
+
433
+ function backspace() {
434
+ if (currentInput.length === 1) {
435
+ currentInput = '0';
436
+ } else {
437
+ currentInput = currentInput.slice(0, -1);
438
+ }
439
+ updateDisplay();
440
+ }
441
+
442
+ function percentage() {
443
+ currentInput = (parseFloat(currentInput) / 100).toString();
444
+ updateDisplay();
445
+ }
446
+
447
+ function squareRoot() {
448
+ currentInput = Math.sqrt(parseFloat(currentInput)).toString();
449
+ updateDisplay();
450
+
451
+ // Add to history
452
+ const historyEntry = {
453
+ expression: `√(${currentInput})`,
454
+ result: currentInput
455
+ };
456
+ calculationHistory.unshift(historyEntry);
457
+ if (calculationHistory.length > 10) {
458
+ calculationHistory.pop();
459
+ }
460
+ updateHistoryList();
461
+ }
462
+
463
+ function applyFunction(func) {
464
+ const value = parseFloat(currentInput);
465
+ let result;
466
+
467
+ switch (func) {
468
+ case 'sin':
469
+ result = Math.sin(value);
470
+ break;
471
+ case 'cos':
472
+ result = Math.cos(value);
473
+ break;
474
+ case 'tan':
475
+ result = Math.tan(value);
476
+ break;
477
+ case 'log':
478
+ result = Math.log10(value);
479
+ break;
480
+ case 'ln':
481
+ result = Math.log(value);
482
+ break;
483
+ }
484
+
485
+ currentInput = result.toString();
486
+
487
+ // Add to history
488
+ const historyEntry = {
489
+ expression: `${func}(${value})`,
490
+ result: currentInput
491
+ };
492
+ calculationHistory.unshift(historyEntry);
493
+ if (calculationHistory.length > 10) {
494
+ calculationHistory.pop();
495
+ }
496
+
497
+ updateDisplay();
498
+ updateHistoryList();
499
+ }
500
+
501
+ // Sidebar buttons
502
+ document.getElementById('cube-root').addEventListener('click', () => appendFunction('∛('));
503
+ document.getElementById('nth-root').addEventListener('click', () => appendFunction('^(1/'));
504
+ document.getElementById('gcd').addEventListener('click', () => appendFunction('gcd('));
505
+ document.getElementById('lcm').addEventListener('click', () => appendFunction('lcm('));
506
+ document.getElementById('abs').addEventListener('click', () => appendFunction('abs('));
507
+ document.getElementById('exp').addEventListener('click', () => appendFunction('exp('));
508
+ document.getElementById('mod').addEventListener('click', () => appendFunction(' mod '));
509
+ document.getElementById('rand').addEventListener('click', randomNumber);
510
+ document.getElementById('open-paren').addEventListener('click', () => appendValue('('));
511
+ document.getElementById('close-paren').addEventListener('click', () => appendValue(')'));
512
+ document.getElementById('e').addEventListener('click', appendE);
513
+ document.getElementById('phi').addEventListener('click', appendPhi);
514
+
515
+ // New functions
516
+ function appendFunction(func) {
517
+ if (resetInput) {
518
+ currentInput = func;
519
+ resetInput = false;
520
+ } else {
521
+ currentInput += func;
522
+ }
523
+ updateDisplay();
524
+ }
525
+
526
+ function appendValue(value) {
527
+ if (currentInput === '0' || resetInput) {
528
+ currentInput = value;
529
+ resetInput = false;
530
+ } else {
531
+ currentInput += value;
532
+ }
533
+ updateDisplay();
534
+ }
535
+
536
+ function appendE() {
537
+ if (currentInput !== '0' && !resetInput) {
538
+ currentInput += Math.E.toString();
539
+ } else {
540
+ currentInput = Math.E.toString();
541
+ resetInput = false;
542
+ }
543
+ updateDisplay();
544
+ }
545
+
546
+ function appendPhi() {
547
+ const phi = (1 + Math.sqrt(5)) / 2;
548
+ if (currentInput !== '0' && !resetInput) {
549
+ currentInput += phi.toString();
550
+ } else {
551
+ currentInput = phi.toString();
552
+ resetInput = false;
553
+ }
554
+ updateDisplay();
555
+ }
556
+
557
+ function randomNumber() {
558
+ const random = Math.random();
559
+ if (currentInput !== '0' && !resetInput) {
560
+ currentInput += random.toString();
561
+ } else {
562
+ currentInput = random.toString();
563
+ resetInput = false;
564
+ }
565
+ updateDisplay();
566
+ }
567
+
568
+ function factorial() {
569
+ let num = parseInt(currentInput);
570
+ if (num < 0) {
571
+ currentInput = 'Error';
572
+ updateDisplay();
573
+ return;
574
+ }
575
+
576
+ let result = 1;
577
+ for (let i = 2; i <= num; i++) {
578
+ result *= i;
579
+ }
580
+
581
+ currentInput = result.toString();
582
+
583
+ // Add to history
584
+ const historyEntry = {
585
+ expression: `${num}!`,
586
+ result: currentInput
587
+ };
588
+ calculationHistory.unshift(historyEntry);
589
+ if (calculationHistory.length > 10) {
590
+ calculationHistory.pop();
591
+ }
592
+
593
+ updateDisplay();
594
+ updateHistoryList();
595
+ }
596
+
597
+ function updateDisplay() {
598
+ display.textContent = currentInput;
599
+
600
+ if (operation !== null) {
601
+ historyDisplay.textContent = `${previousInput} ${operation}`;
602
+ } else {
603
+ historyDisplay.textContent = '';
604
+ }
605
+ }
606
+
607
+ // Helper functions
608
+ function gcd(a, b) {
609
+ a = Math.abs(a);
610
+ b = Math.abs(b);
611
+ while (b) [a, b] = [b, a % b];
612
+ return a;
613
+ }
614
+
615
+ function lcm(a, b) {
616
+ return (a * b) / gcd(a, b);
617
+ }
618
+
619
+ function updateHistoryList() {
620
+ historyList.innerHTML = '';
621
+
622
+ calculationHistory.forEach((entry, index) => {
623
+ const historyItem = document.createElement('div');
624
+ historyItem.className = 'history-item bg-gray-600 rounded p-2 text-sm';
625
+ historyItem.innerHTML = `
626
+ <div class="text-gray-300">${entry.expression} =</div>
627
+ <div class="text-right font-semibold">${entry.result}</div>
628
+ `;
629
+
630
+ historyItem.addEventListener('click', () => {
631
+ currentInput = entry.result;
632
+ resetInput = true;
633
+ updateDisplay();
634
+ });
635
+
636
+ historyList.appendChild(historyItem);
637
+ });
638
+ }
639
+
640
+ function handleKeyboardInput(e) {
641
+ if (e.key >= '0' && e.key <= '9') {
642
+ appendNumber(e.key);
643
+ } else if (e.key === '.') {
644
+ appendDecimal();
645
+ } else if (e.key === '+') {
646
+ setOperation('+');
647
+ } else if (e.key === '-') {
648
+ setOperation('-');
649
+ } else if (e.key === '*') {
650
+ setOperation('×');
651
+ } else if (e.key === '/') {
652
+ setOperation('÷');
653
+ } else if (e.key === '^') {
654
+ setOperation('^');
655
+ } else if (e.key === '(') {
656
+ appendValue('(');
657
+ } else if (e.key === ')') {
658
+ appendValue(')');
659
+ } else if (e.key === 'Enter' || e.key === '=') {
660
+ compute();
661
+ } else if (e.key === 'Escape') {
662
+ clear();
663
+ } else if (e.key === 'Backspace') {
664
+ backspace();
665
+ } else if (e.key === '%') {
666
+ percentage();
667
+ }
668
+ }
669
+ });
670
+ </script>
671
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kokofixcomputers/scientificcalculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
672
+ </html>