Hugging Face's logo

Spaces:
637366heh
/
anycoder-9d9b9621
Running

App Files Community
637366heh commited on
Commit
45faa8a
·
verified ·
1 Parent(s): 7f18fd5

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +774 -19
index.html CHANGED
@@ -1,19 +1,774 @@
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>Advanced Calculator</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ :root {
15
+ --primary-color: #667eea;
16
+ --secondary-color: #764ba2;
17
+ --bg-primary: #0f0f23;
18
+ --bg-secondary: #1a1a2e;
19
+ --bg-tertiary: #16213e;
20
+ --text-primary: #ffffff;
21
+ --text-secondary: #a0a0a0;
22
+ --accent: #f7b801;
23
+ --danger: #ff4757;
24
+ --success: #00d2d3;
25
+ --border-radius: 20px;
26
+ --button-radius: 15px;
27
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
28
+ }
29
+
30
+ body.light-theme {
31
+ --bg-primary: #f8f9fa;
32
+ --bg-secondary: #ffffff;
33
+ --bg-tertiary: #e9ecef;
34
+ --text-primary: #212529;
35
+ --text-secondary: #6c757d;
36
+ --primary-color: #667eea;
37
+ --secondary-color: #764ba2;
38
+ }
39
+
40
+ body {
41
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
42
+ background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
43
+ min-height: 100vh;
44
+ display: flex;
45
+ flex-direction: column;
46
+ color: var(--text-primary);
47
+ transition: var(--transition);
48
+ overflow-x: hidden;
49
+ }
50
+
51
+ header {
52
+ padding: 1.5rem;
53
+ text-align: center;
54
+ background: rgba(255, 255, 255, 0.05);
55
+ backdrop-filter: blur(10px);
56
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
57
+ }
58
+
59
+ .logo {
60
+ font-size: 1.8rem;
61
+ font-weight: 700;
62
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
63
+ -webkit-background-clip: text;
64
+ -webkit-text-fill-color: transparent;
65
+ background-clip: text;
66
+ margin-bottom: 0.5rem;
67
+ }
68
+
69
+ .built-with {
70
+ font-size: 0.9rem;
71
+ color: var(--text-secondary);
72
+ }
73
+
74
+ .built-with a {
75
+ color: var(--primary-color);
76
+ text-decoration: none;
77
+ transition: var(--transition);
78
+ }
79
+
80
+ .built-with a:hover {
81
+ text-decoration: underline;
82
+ }
83
+
84
+ main {
85
+ flex: 1;
86
+ display: flex;
87
+ justify-content: center;
88
+ align-items: center;
89
+ padding: 2rem;
90
+ }
91
+
92
+ .calculator-container {
93
+ display: grid;
94
+ grid-template-columns: 1fr auto;
95
+ gap: 2rem;
96
+ max-width: 1200px;
97
+ width: 100%;
98
+ }
99
+
100
+ .calculator {
101
+ background: var(--bg-secondary);
102
+ border-radius: var(--border-radius);
103
+ padding: 2rem;
104
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
105
+ width: 100%;
106
+ max-width: 450px;
107
+ margin: 0 auto;
108
+ position: relative;
109
+ overflow: hidden;
110
+ }
111
+
112
+ .calculator::before {
113
+ content: '';
114
+ position: absolute;
115
+ top: 0;
116
+ left: 0;
117
+ right: 0;
118
+ height: 2px;
119
+ background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
120
+ animation: shimmer 2s infinite;
121
+ }
122
+
123
+ @keyframes shimmer {
124
+ 0% { transform: translateX(-100%); }
125
+ 100% { transform: translateX(100%); }
126
+ }
127
+
128
+ .theme-toggle {
129
+ position: absolute;
130
+ top: 1.5rem;
131
+ right: 1.5rem;
132
+ background: var(--bg-tertiary);
133
+ border: none;
134
+ border-radius: 50%;
135
+ width: 40px;
136
+ height: 40px;
137
+ cursor: pointer;
138
+ display: flex;
139
+ align-items: center;
140
+ justify-content: center;
141
+ font-size: 1.2rem;
142
+ transition: var(--transition);
143
+ z-index: 10;
144
+ }
145
+
146
+ .theme-toggle:hover {
147
+ transform: rotate(180deg);
148
+ background: var(--primary-color);
149
+ }
150
+
151
+ .display {
152
+ background: var(--bg-tertiary);
153
+ border-radius: var(--button-radius);
154
+ padding: 1.5rem;
155
+ margin-bottom: 1.5rem;
156
+ min-height: 100px;
157
+ display: flex;
158
+ flex-direction: column;
159
+ justify-content: flex-end;
160
+ align-items: flex-end;
161
+ position: relative;
162
+ overflow: hidden;
163
+ }
164
+
165
+ .display::after {
166
+ content: '';
167
+ position: absolute;
168
+ top: 0;
169
+ left: 0;
170
+ right: 0;
171
+ height: 1px;
172
+ background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
173
+ animation: scan 3s linear infinite;
174
+ }
175
+
176
+ @keyframes scan {
177
+ 0% { transform: translateY(-100%); opacity: 0; }
178
+ 50% { opacity: 1; }
179
+ 100% { transform: translateY(100%); opacity: 0; }
180
+ }
181
+
182
+ .previous-operand {
183
+ font-size: 0.9rem;
184
+ color: var(--text-secondary);
185
+ margin-bottom: 0.5rem;
186
+ min-height: 20px;
187
+ }
188
+
189
+ .current-operand {
190
+ font-size: 2.5rem;
191
+ font-weight: 300;
192
+ color: var(--text-primary);
193
+ word-wrap: break-word;
194
+ word-break: break-all;
195
+ transition: var(--transition);
196
+ }
197
+
198
+ .current-operand.error {
199
+ color: var(--danger);
200
+ animation: shake 0.5s;
201
+ }
202
+
203
+ @keyframes shake {
204
+ 0%, 100% { transform: translateX(0); }
205
+ 25% { transform: translateX(-10px); }
206
+ 75% { transform: translateX(10px); }
207
+ }
208
+
209
+ .buttons {
210
+ display: grid;
211
+ grid-template-columns: repeat(4, 1fr);
212
+ gap: 0.75rem;
213
+ }
214
+
215
+ button {
216
+ background: var(--bg-tertiary);
217
+ border: none;
218
+ border-radius: var(--button-radius);
219
+ padding: 1.25rem;
220
+ font-size: 1.2rem;
221
+ color: var(--text-primary);
222
+ cursor: pointer;
223
+ transition: var(--transition);
224
+ position: relative;
225
+ overflow: hidden;
226
+ }
227
+
228
+ button::before {
229
+ content: '';
230
+ position: absolute;
231
+ top: 50%;
232
+ left: 50%;
233
+ width: 0;
234
+ height: 0;
235
+ border-radius: 50%;
236
+ background: rgba(255, 255, 255, 0.1);
237
+ transform: translate(-50%, -50%);
238
+ transition: width 0.6s, height 0.6s;
239
+ }
240
+
241
+ button:active::before {
242
+ width: 300px;
243
+ height: 300px;
244
+ }
245
+
246
+ button:hover {
247
+ transform: translateY(-2px);
248
+ box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
249
+ }
250
+
251
+ button:active {
252
+ transform: translateY(0);
253
+ }
254
+
255
+ button.operator {
256
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
257
+ font-weight: 600;
258
+ }
259
+
260
+ button.operator:hover {
261
+ box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
262
+ }
263
+
264
+ button.equals {
265
+ background: linear-gradient(135deg, var(--accent), #f39c12);
266
+ grid-column: span 2;
267
+ font-weight: 600;
268
+ }
269
+
270
+ button.clear {
271
+ background: linear-gradient(135deg, var(--danger), #c44569);
272
+ }
273
+
274
+ button.function {
275
+ background: var(--bg-tertiary);
276
+ color: var(--primary-color);
277
+ font-weight: 600;
278
+ }
279
+
280
+ button.zero {
281
+ grid-column: span 2;
282
+ }
283
+
284
+ .history-panel {
285
+ background: var(--bg-secondary);
286
+ border-radius: var(--border-radius);
287
+ padding: 1.5rem;
288
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
289
+ width: 100%;
290
+ max-width: 350px;
291
+ max-height: 500px;
292
+ display: flex;
293
+ flex-direction: column;
294
+ }
295
+
296
+ .history-header {
297
+ display: flex;
298
+ justify-content: space-between;
299
+ align-items: center;
300
+ margin-bottom: 1rem;
301
+ padding-bottom: 1rem;
302
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
303
+ }
304
+
305
+ .history-title {
306
+ font-size: 1.2rem;
307
+ font-weight: 600;
308
+ color: var(--text-primary);
309
+ }
310
+
311
+ .clear-history {
312
+ background: transparent;
313
+ border: 1px solid var(--danger);
314
+ color: var(--danger);
315
+ padding: 0.5rem 1rem;
316
+ border-radius: 8px;
317
+ font-size: 0.9rem;
318
+ cursor: pointer;
319
+ transition: var(--transition);
320
+ }
321
+
322
+ .clear-history:hover {
323
+ background: var(--danger);
324
+ color: white;
325
+ }
326
+
327
+ .history-list {
328
+ flex: 1;
329
+ overflow-y: auto;
330
+ padding-right: 0.5rem;
331
+ }
332
+
333
+ .history-list::-webkit-scrollbar {
334
+ width: 6px;
335
+ }
336
+
337
+ .history-list::-webkit-scrollbar-track {
338
+ background: var(--bg-tertiary);
339
+ border-radius: 3px;
340
+ }
341
+
342
+ .history-list::-webkit-scrollbar-thumb {
343
+ background: var(--primary-color);
344
+ border-radius: 3px;
345
+ }
346
+
347
+ .history-item {
348
+ background: var(--bg-tertiary);
349
+ border-radius: 10px;
350
+ padding: 1rem;
351
+ margin-bottom: 0.75rem;
352
+ cursor: pointer;
353
+ transition: var(--transition);
354
+ animation: slideIn 0.3s ease;
355
+ }
356
+
357
+ @keyframes slideIn {
358
+ from {
359
+ opacity: 0;
360
+ transform: translateX(20px);
361
+ }
362
+ to {
363
+ opacity: 1;
364
+ transform: translateX(0);
365
+ }
366
+ }
367
+
368
+ .history-item:hover {
369
+ background: var(--primary-color);
370
+ transform: translateX(-5px);
371
+ }
372
+
373
+ .history-expression {
374
+ font-size: 0.9rem;
375
+ color: var(--text-secondary);
376
+ margin-bottom: 0.25rem;
377
+ }
378
+
379
+ .history-result {
380
+ font-size: 1.1rem;
381
+ color: var(--text-primary);
382
+ font-weight: 600;
383
+ }
384
+
385
+ .empty-history {
386
+ text-align: center;
387
+ color: var(--text-secondary);
388
+ padding: 2rem;
389
+ font-style: italic;
390
+ }
391
+
392
+ @media (max-width: 968px) {
393
+ .calculator-container {
394
+ grid-template-columns: 1fr;
395
+ max-width: 500px;
396
+ }
397
+
398
+ .history-panel {
399
+ max-height: 300px;
400
+ }
401
+ }
402
+
403
+ @media (max-width: 480px) {
404
+ .calculator {
405
+ padding: 1.5rem;
406
+ }
407
+
408
+ .display {
409
+ padding: 1rem;
410
+ min-height: 80px;
411
+ }
412
+
413
+ .current-operand {
414
+ font-size: 2rem;
415
+ }
416
+
417
+ button {
418
+ padding: 1rem;
419
+ font-size: 1rem;
420
+ }
421
+
422
+ .buttons {
423
+ gap: 0.5rem;
424
+ }
425
+ }
426
+
427
+ .tooltip {
428
+ position: absolute;
429
+ background: var(--bg-tertiary);
430
+ color: var(--text-primary);
431
+ padding: 0.5rem 1rem;
432
+ border-radius: 8px;
433
+ font-size: 0.8rem;
434
+ white-space: nowrap;
435
+ pointer-events: none;
436
+ opacity: 0;
437
+ transition: opacity 0.3s;
438
+ z-index: 1000;
439
+ bottom: calc(100% + 10px);
440
+ left: 50%;
441
+ transform: translateX(-50%);
442
+ }
443
+
444
+ button:hover .tooltip {
445
+ opacity: 1;
446
+ }
447
+ </style>
448
+ </head>
449
+ <body>
450
+ <header>
451
+ <div class="logo">Advanced Calculator</div>
452
+ <div class="built-with">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Anycoder</a></div>
453
+ </header>
454
+
455
+ <main>
456
+ <div class="calculator-container">
457
+ <div class="calculator">
458
+ <button class="theme-toggle" onclick="toggleTheme()">
459
+ <span id="themeIcon">🌙</span>
460
+ </button>
461
+
462
+ <div class="display">
463
+ <div class="previous-operand" id="previousOperand"></div>
464
+ <div class="current-operand" id="currentOperand">0</div>
465
+ </div>
466
+
467
+ <div class="buttons">
468
+ <button class="clear" onclick="clearAll()">AC</button>
469
+ <button class="function" onclick="deleteDigit()">DEL</button>
470
+ <button class="function" onclick="appendFunction('sqrt')">√</button>
471
+ <button class="operator" onclick="chooseOperation('/')">÷</button>
472
+
473
+ <button onclick="appendNumber('7')">7</button>
474
+ <button onclick="appendNumber('8')">8</button>
475
+ <button onclick="appendNumber('9')">9</button>
476
+ <button class="operator" onclick="chooseOperation('*')">×</button>
477
+
478
+ <button onclick="appendNumber('4')">4</button>
479
+ <button onclick="appendNumber('5')">5</button>
480
+ <button onclick="appendNumber('6')">6</button>
481
+ <button class="operator" onclick="chooseOperation('-')">−</button>
482
+
483
+ <button onclick="appendNumber('1')">1</button>
484
+ <button onclick="appendNumber('2')">2</button>
485
+ <button onclick="appendNumber('3')">3</button>
486
+ <button class="operator" onclick="chooseOperation('+')">+</button>
487
+
488
+ <button onclick="appendNumber('0')" class="zero">0</button>
489
+ <button onclick="appendDecimal()">.</button>
490
+ <button onclick="appendFunction('percent')">%</button>
491
+ <button class="equals" onclick="calculate()">=</button>
492
+
493
+ <button class="function" onclick="appendFunction('sin')">sin</button>
494
+ <button class="function" onclick="appendFunction('cos')">cos</button>
495
+ <button class="function" onclick="appendFunction('tan')">tan</button>
496
+ <button class="function" onclick="appendFunction('log')">log</button>
497
+
498
+ <button class="function" onclick="appendFunction('pow2')">x²</button>
499
+ <button class="function" onclick="appendFunction('pow3')">x³</button>
500
+ <button class="function" onclick="appendFunction('pi')">π</button>
501
+ <button class="function" onclick="appendFunction('e')">e</button>
502
+ </div>
503
+ </div>
504
+
505
+ <div class="history-panel">
506
+ <div class="history-header">
507
+ <div class="history-title">History</div>
508
+ <button class="clear-history" onclick="clearHistory()">Clear</button>
509
+ </div>
510
+ <div class="history-list" id="historyList">
511
+ <div class="empty-history">No calculations yet</div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </main>
516
+
517
+ <script>
518
+ let currentOperand = '0';
519
+ let previousOperand = '';
520
+ let operation = null;
521
+ let shouldResetScreen = false;
522
+ let history = [];
523
+
524
+ const currentOperandElement = document.getElementById('currentOperand');
525
+ const previousOperandElement = document.getElementById('previousOperand');
526
+ const historyListElement = document.getElementById('historyList');
527
+
528
+ function updateDisplay() {
529
+ currentOperandElement.textContent = formatNumber(currentOperand);
530
+ if (operation != null) {
531
+ previousOperandElement.textContent = `${formatNumber(previousOperand)} ${getOperationSymbol(operation)}`;
532
+ } else {
533
+ previousOperandElement.textContent = '';
534
+ }
535
+ }
536
+
537
+ function formatNumber(number) {
538
+ if (number.length > 12) {
539
+ return parseFloat(number).toExponential(6);
540
+ }
541
+ const stringNumber = number.toString();
542
+ if (stringNumber.includes('.')) {
543
+ return parseFloat(stringNumber).toLocaleString('en-US', {
544
+ maximumFractionDigits: 10
545
+ });
546
+ }
547
+ return parseFloat(stringNumber).toLocaleString('en-US');
548
+ }
549
+
550
+ function getOperationSymbol(op) {
551
+ switch(op) {
552
+ case '+': return '+';
553
+ case '-': return '−';
554
+ case '*': return '×';
555
+ case '/': return '÷';
556
+ default: return op;
557
+ }
558
+ }
559
+
560
+ function appendNumber(number) {
561
+ if (shouldResetScreen) {
562
+ currentOperand = '';
563
+ shouldResetScreen = false;
564
+ }
565
+ if (currentOperand === '0' && number !== '.') {
566
+ currentOperand = number;
567
+ } else {
568
+ currentOperand += number;
569
+ }
570
+ updateDisplay();
571
+ }
572
+
573
+ function appendDecimal() {
574
+ if (shouldResetScreen) {
575
+ currentOperand = '0';
576
+ shouldResetScreen = false;
577
+ }
578
+ if (!currentOperand.includes('.')) {
579
+ currentOperand += '.';
580
+ }
581
+ updateDisplay();
582
+ }
583
+
584
+ function chooseOperation(op) {
585
+ if (currentOperand === '') return;
586
+ if (previousOperand !== '') {
587
+ calculate();
588
+ }
589
+ operation = op;
590
+ previousOperand = currentOperand;
591
+ currentOperand = '';
592
+ updateDisplay();
593
+ }
594
+
595
+ function calculate() {
596
+ let computation;
597
+ const prev = parseFloat(previousOperand);
598
+ const current = parseFloat(currentOperand);
599
+
600
+ if (isNaN(prev) || isNaN(current)) return;
601
+
602
+ switch(operation) {
603
+ case '+':
604
+ computation = prev + current;
605
+ break;
606
+ case '-':
607
+ computation = prev - current;
608
+ break;
609
+ case '*':
610
+ computation = prev * current;
611
+ break;
612
+ case '/':
613
+ if (current === 0) {
614
+ showError('Cannot divide by zero');
615
+ return;
616
+ }
617
+ computation = prev / current;
618
+ break;
619
+ default:
620
+ return;
621
+ }
622
+
623
+ addToHistory(`${formatNumber(previousOperand)} ${getOperationSymbol(operation)} ${formatNumber(currentOperand)}`, computation.toString());
624
+ currentOperand = computation.toString();
625
+ operation = null;
626
+ previousOperand = '';
627
+ shouldResetScreen = true;
628
+ updateDisplay();
629
+ }
630
+
631
+ function appendFunction(func) {
632
+ const current = parseFloat(currentOperand);
633
+ if (isNaN(current)) return;
634
+
635
+ let result;
636
+ switch(func) {
637
+ case 'sqrt':
638
+ if (current < 0) {
639
+ showError('Invalid input');
640
+ return;
641
+ }
642
+ result = Math.sqrt(current);
643
+ break;
644
+ case 'percent':
645
+ result = current / 100;
646
+ break;
647
+ case 'sin':
648
+ result = Math.sin(current * Math.PI / 180);
649
+ break;
650
+ case 'cos':
651
+ result = Math.cos(current * Math.PI / 180);
652
+ break;
653
+ case 'tan':
654
+ result = Math.tan(current * Math.PI / 180);
655
+ break;
656
+ case 'log':
657
+ if (current <= 0) {
658
+ showError('Invalid input');
659
+ return;
660
+ }
661
+ result = Math.log10(current);
662
+ break;
663
+ case 'pow2':
664
+ result = Math.pow(current, 2);
665
+ break;
666
+ case 'pow3':
667
+ result = Math.pow(current, 3);
668
+ break;
669
+ case 'pi':
670
+ currentOperand = Math.PI.toString();
671
+ updateDisplay();
672
+ return;
673
+ case 'e':
674
+ currentOperand = Math.E.toString();
675
+ updateDisplay();
676
+ return;
677
+ default:
678
+ return;
679
+ }
680
+
681
+ addToHistory(`${func}(${formatNumber(currentOperand)})`, result.toString());
682
+ currentOperand = result.toString();
683
+ shouldResetScreen = true;
684
+ updateDisplay();
685
+ }
686
+
687
+ function clearAll() {
688
+ currentOperand = '0';
689
+ previousOperand = '';
690
+ operation = null;
691
+ shouldResetScreen = false;
692
+ updateDisplay();
693
+ }
694
+
695
+ function deleteDigit() {
696
+ if (currentOperand.length > 1) {
697
+ currentOperand = currentOperand.slice(0, -1);
698
+ } else {
699
+ currentOperand = '0';
700
+ }
701
+ updateDisplay();
702
+ }
703
+
704
+ function showError(message) {
705
+ currentOperandElement.textContent = message;
706
+ currentOperandElement.classList.add('error');
707
+ setTimeout(() => {
708
+ currentOperandElement.classList.remove('error');
709
+ clearAll();
710
+ }, 2000);
711
+ }
712
+
713
+ function addToHistory(expression, result) {
714
+ history.unshift({ expression, result });
715
+ if (history.length > 20) {
716
+ history.pop();
717
+ }
718
+ updateHistoryDisplay();
719
+ }
720
+
721
+ function updateHistoryDisplay() {
722
+ if (history.length === 0) {
723
+ historyListElement.innerHTML = '<div class="empty-history">No calculations yet</div>';
724
+ return;
725
+ }
726
+
727
+ historyListElement.innerHTML = history.map((item, index) => `
728
+ <div class="history-item" onclick="loadFromHistory(${index})">
729
+ <div class="history-expression">${item.expression}</div>
730
+ <div class="history-result">= ${formatNumber(item.result)}</div>
731
+ </div>
732
+ `).join('');
733
+ }
734
+
735
+ function loadFromHistory(index) {
736
+ const item = history[index];
737
+ currentOperand = item.result;
738
+ shouldResetScreen = true;
739
+ updateDisplay();
740
+ }
741
+
742
+ function clearHistory() {
743
+ history = [];
744
+ updateHistoryDisplay();
745
+ }
746
+
747
+ function toggleTheme() {
748
+ document.body.classList.toggle('light-theme');
749
+ const icon = document.getElementById('themeIcon');
750
+ icon.textContent = document.body.classList.contains('light-theme') ? '☀️' : '🌙';
751
+ }
752
+
753
+ // Keyboard support
754
+ document.addEventListener('keydown', (e) => {
755
+ if (e.key >= '0' && e.key <= '9') {
756
+ appendNumber(e.key);
757
+ } else if (e.key === '.') {
758
+ appendDecimal();
759
+ } else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
760
+ chooseOperation(e.key);
761
+ } else if (e.key === 'Enter' || e.key === '=') {
762
+ calculate();
763
+ } else if (e.key === 'Escape' || e.key === 'c' || e.key === 'C') {
764
+ clearAll();
765
+ } else if (e.key === 'Backspace') {
766
+ deleteDigit();
767
+ }
768
+ });
769
+
770
+ // Initialize
771
+ updateDisplay();
772
+ </script>
773
+ </body>
774
+ </html>