Hugging Face's logo

Spaces:
Everyamans-ai
/
calculator
Running

App Files Community
Everyamans-ai commited on
Commit
b7f9d49
·
verified ·
1 Parent(s): 2881917

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +328 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Calculator
3
- emoji: 📊
4
  colorFrom: blue
5
- colorTo: indigo
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: calculator
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: blue
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,328 @@
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 Calculator</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Roboto', sans-serif;
14
+ user-select: none;
15
+ }
16
+
17
+ body {
18
+ display: flex;
19
+ justify-content: center;
20
+ align-items: center;
21
+ min-height: 100vh;
22
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
23
+ }
24
+
25
+ .calculator {
26
+ width: 320px;
27
+ background: rgba(255, 255, 255, 0.1);
28
+ backdrop-filter: blur(10px);
29
+ border-radius: 20px;
30
+ box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
31
+ border: 1px solid rgba(255, 255, 255, 0.1);
32
+ padding: 20px;
33
+ overflow: hidden;
34
+ transition: all 0.3s ease;
35
+ }
36
+
37
+ .display {
38
+ padding: 20px;
39
+ margin-bottom: 20px;
40
+ text-align: right;
41
+ font-size: 2.5rem;
42
+ color: white;
43
+ background: rgba(255, 255, 255, 0.05);
44
+ border-radius: 10px;
45
+ height: 100px;
46
+ display: flex;
47
+ flex-direction: column;
48
+ justify-content: space-between;
49
+ overflow: hidden;
50
+ }
51
+
52
+ .previous-operand {
53
+ font-size: 1rem;
54
+ color: rgba(255, 255, 255, 0.7);
55
+ height: 20px;
56
+ overflow: hidden;
57
+ text-overflow: ellipsis;
58
+ }
59
+
60
+ .current-operand {
61
+ overflow: hidden;
62
+ text-overflow: ellipsis;
63
+ }
64
+
65
+ .buttons-grid {
66
+ display: grid;
67
+ grid-template-columns: repeat(4, 1fr);
68
+ gap: 12px;
69
+ }
70
+
71
+ .btn {
72
+ height: 60px;
73
+ border: none;
74
+ border-radius: 12px;
75
+ font-size: 1.2rem;
76
+ cursor: pointer;
77
+ transition: all 0.2s ease;
78
+ color: white;
79
+ background: rgba(255, 255, 255, 0.1);
80
+ display: flex;
81
+ justify-content: center;
82
+ align-items: center;
83
+ position: relative;
84
+ overflow: hidden;
85
+ }
86
+
87
+ .btn:active {
88
+ transform: scale(0.95);
89
+ }
90
+
91
+ .btn::after {
92
+ content: '';
93
+ position: absolute;
94
+ top: 50%;
95
+ left: 50%;
96
+ width: 5px;
97
+ height: 5px;
98
+ background: rgba(255, 255, 255, 0.5);
99
+ opacity: 0;
100
+ border-radius: 100%;
101
+ transform: scale(1, 1) translate(-50%);
102
+ transform-origin: 50% 50%;
103
+ }
104
+
105
+ .btn:focus:not(:active)::after {
106
+ animation: ripple 1s ease-out;
107
+ }
108
+
109
+ @keyframes ripple {
110
+ 0% {
111
+ transform: scale(0, 0);
112
+ opacity: 0.5;
113
+ }
114
+ 100% {
115
+ transform: scale(20, 20);
116
+ opacity: 0;
117
+ }
118
+ }
119
+
120
+ .btn-operation {
121
+ background: rgba(255, 166, 0, 0.5);
122
+ }
123
+
124
+ .btn-equals {
125
+ background: rgba(76, 175, 80, 0.6);
126
+ }
127
+
128
+ .btn-clear {
129
+ background: rgba(244, 67, 54, 0.6);
130
+ }
131
+
132
+ .btn-delete {
133
+ background: rgba(156, 39, 176, 0.6);
134
+ }
135
+
136
+ .span-2 {
137
+ grid-column: span 2;
138
+ }
139
+ </style>
140
+ </head>
141
+ <body>
142
+ <div class="calculator">
143
+ <div class="display">
144
+ <div class="previous-operand" id="previous-operand"></div>
145
+ <div class="current-operand" id="current-operand">0</div>
146
+ </div>
147
+ <div class="buttons-grid">
148
+ <button class="btn btn-clear span-2" id="clear">AC</button>
149
+ <button class="btn btn-delete" id="delete">DEL</button>
150
+ <button class="btn btn-operation" id="divide">÷</button>
151
+
152
+ <button class="btn" id="seven">7</button>
153
+ <button class="btn" id="eight">8</button>
154
+ <button class="btn" id="nine">9</button>
155
+ <button class="btn btn-operation" id="multiply">×</button>
156
+
157
+ <button class="btn" id="four">4</button>
158
+ <button class="btn" id="five">5</button>
159
+ <button class="btn" id="six">6</button>
160
+ <button class="btn btn-operation" id="subtract">-</button>
161
+
162
+ <button class="btn" id="one">1</button>
163
+ <button class="btn" id="two">2</button>
164
+ <button class="btn" id="three">3</button>
165
+ <button class="btn btn-operation" id="add">+</button>
166
+
167
+ <button class="btn" id="zero">0</button>
168
+ <button class="btn" id="decimal">.</button>
169
+ <button class="btn btn-equals span-2" id="equals">=</button>
170
+ </div>
171
+ </div>
172
+
173
+ <script>
174
+ document.addEventListener('DOMContentLoaded', () => {
175
+ const previousOperandElement = document.getElementById('previous-operand');
176
+ const currentOperandElement = document.getElementById('current-operand');
177
+ const numberButtons = document.querySelectorAll('.btn:not(.btn-operation):not(.btn-equals):not(.btn-clear):not(.btn-delete)');
178
+ const operationButtons = document.querySelectorAll('.btn-operation');
179
+ const equalsButton = document.getElementById('equals');
180
+ const clearButton = document.getElementById('clear');
181
+ const deleteButton = document.getElementById('delete');
182
+
183
+ class Calculator {
184
+ constructor(previousOperandElement, currentOperandElement) {
185
+ this.previousOperandElement = previousOperandElement;
186
+ this.currentOperandElement = currentOperandElement;
187
+ this.clear();
188
+ }
189
+
190
+ clear() {
191
+ this.currentOperand = '0';
192
+ this.previousOperand = '';
193
+ this.operation = undefined;
194
+ }
195
+
196
+ delete() {
197
+ this.currentOperand = this.currentOperand.toString().slice(0, -1);
198
+ if (this.currentOperand === '') {
199
+ this.currentOperand = '0';
200
+ }
201
+ }
202
+
203
+ appendNumber(number) {
204
+ if (number === '.' && this.currentOperand.includes('.')) return;
205
+ if (this.currentOperand === '0' && number !== '.') {
206
+ this.currentOperand = number.toString();
207
+ } else {
208
+ this.currentOperand = this.currentOperand.toString() + number.toString();
209
+ }
210
+ }
211
+
212
+ chooseOperation(operation) {
213
+ if (this.currentOperand === '') return;
214
+ if (this.previousOperand !== '') {
215
+ this.compute();
216
+ }
217
+ this.operation = operation;
218
+ this.previousOperand = this.currentOperand;
219
+ this.currentOperand = '';
220
+ }
221
+
222
+ compute() {
223
+ let computation;
224
+ const prev = parseFloat(this.previousOperand);
225
+ const current = parseFloat(this.currentOperand);
226
+ if (isNaN(prev) || isNaN(current)) return;
227
+
228
+ switch (this.operation) {
229
+ case '+':
230
+ computation = prev + current;
231
+ break;
232
+ case '-':
233
+ computation = prev - current;
234
+ break;
235
+ case '×':
236
+ computation = prev * current;
237
+ break;
238
+ case '÷':
239
+ computation = prev / current;
240
+ break;
241
+ default:
242
+ return;
243
+ }
244
+
245
+ this.currentOperand = computation.toString();
246
+ this.operation = undefined;
247
+ this.previousOperand = '';
248
+ }
249
+
250
+ updateDisplay() {
251
+ this.currentOperandElement.innerText = this.currentOperand;
252
+ if (this.operation != null) {
253
+ this.previousOperandElement.innerText =
254
+ `${this.previousOperand} ${this.operation}`;
255
+ } else {
256
+ this.previousOperandElement.innerText = '';
257
+ }
258
+ }
259
+ }
260
+
261
+ const calculator = new Calculator(previousOperandElement, currentOperandElement);
262
+
263
+ numberButtons.forEach(button => {
264
+ button.addEventListener('click', () => {
265
+ calculator.appendNumber(button.innerText);
266
+ calculator.updateDisplay();
267
+ });
268
+ });
269
+
270
+ operationButtons.forEach(button => {
271
+ button.addEventListener('click', () => {
272
+ calculator.chooseOperation(button.innerText);
273
+ calculator.updateDisplay();
274
+ });
275
+ });
276
+
277
+ equalsButton.addEventListener('click', () => {
278
+ calculator.compute();
279
+ calculator.updateDisplay();
280
+ });
281
+
282
+ clearButton.addEventListener('click', () => {
283
+ calculator.clear();
284
+ calculator.updateDisplay();
285
+ });
286
+
287
+ deleteButton.addEventListener('click', () => {
288
+ calculator.delete();
289
+ calculator.updateDisplay();
290
+ });
291
+
292
+ // Keyboard support
293
+ document.addEventListener('keydown', (e) => {
294
+ if ((e.key >= '0' && e.key <= '9') || e.key === '.') {
295
+ calculator.appendNumber(e.key);
296
+ calculator.updateDisplay();
297
+ } else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
298
+ let operation;
299
+ if (e.key === '*') operation = '×';
300
+ else if (e.key === '/') operation = '÷';
301
+ else operation = e.key;
302
+
303
+ calculator.chooseOperation(operation);
304
+ calculator.updateDisplay();
305
+ } else if (e.key === 'Enter' || e.key === '=') {
306
+ e.preventDefault();
307
+ calculator.compute();
308
+ calculator.updateDisplay();
309
+ } else if (e.key === 'Backspace') {
310
+ calculator.delete();
311
+ calculator.updateDisplay();
312
+ } else if (e.key === 'Escape') {
313
+ calculator.clear();
314
+ calculator.updateDisplay();
315
+ }
316
+ });
317
+
318
+ // Button ripple effect
319
+ const buttons = document.querySelectorAll('.btn');
320
+ buttons.forEach(button => {
321
+ button.addEventListener('click', function() {
322
+ this.focus();
323
+ });
324
+ });
325
+ });
326
+ </script>
327
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
328
+ </html>