-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcalculator.html
507 lines (445 loc) · 21.7 KB
/
calculator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> nah</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="theme.js"></script>
<style>
:root {
--primary-color: #6C63FF;
--secondary-color: #3F3D56;
--accent-color: #F50057;
--text-color: #F8F9FA;
--bg-color: #121212;
--card-bg: #1E1E1E;
--glass-bg: rgba(255, 255, 255, 0.1); /* Frosted Glass Effect */
--hover-bg: rgba(255, 255, 255, 0.1); /* Slightly Darker Hover Background */
--border-radius: 15px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color); /* Solid dark background */
backdrop-filter: blur(10px); /* Optional: keeps the frosted glass effect */
}
body.night-mode {
background-color: #333333;
primary-color: #121212; /* Darker background */
secondary-color: #1E1E1E; /* Darker grayish background */
accent-color: #009bf5; /* Adjust if necessary */
text-color: #e0e0e0; /* Lighter text color for dark mode */
--bg-color: rgba(18, 18, 18, 0.8); /* Darker background */
--card-bg: rgba(30, 30, 30, 0.8); /* Darker card background */
--glass-bg: rgba(18, 18, 18, 0.8); /* Darker frosted glass effect */
--hover-bg: rgba(30, 30, 30, 0.9); /* Darker hover background */
}
}
.menu-item {
display: flex;
align-items: center;
cursor: pointer;
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.3s;
}
.menu-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.theme-icon {
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.theme-icon.active {
animation: rotate 0.5s ease-in-out;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 250px;
min-width: 250px; /* Ensure minimum width is always maintained */
max-width: 250px; /* Ensure maximum width is always maintained */
background: inherit;
padding: 20px;
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
}
.sidebar h1 {
font-size: 24px;
margin-bottom: 20px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
margin-bottom: 20px;
}
.sidebar ul li a {
text-decoration: none;
color: var(--secondary-color);
font-size: 18px;
transition: color 0.3s ease;
}
.sidebar ul li a:hover {
color: var(--primary-color);
}
.logo {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-color);
display: flex;
align-items: center;
margin-bottom: 30px;
}
.logo svg {
width: 30px;
height: 30px;
margin-right: 10px;
}
.menu-item {
margin-bottom: 15px;
color: var(--text-color);
cursor: pointer;
transition: color 0.3s ease;
display: flex;
align-items: center;
transition: transform 0.3s ease;
}
.menu-item svg {
width: 20px;
height: 20px;
margin-right: 10px;
}
.menu-item:hover {
color: var(--primary-color);
transform: scale(1.1);
}
.upgrade-btn {
background: linear-gradient(45deg, var(--accent-color), #FF1493);
color: var(--text-color);
border: none;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
margin-top: 20px;
font-weight: 600;
display: flex;
align-items: center;
transition: background-color 0.3s ease, transform 0.3s ease;
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.1);
}
.upgrade-btn svg {
width: 20px;
height: 20px;
margin-right: 10px;
}
.upgrade-btn:hover {
transform: scale(1.05);
}
.main-content {
flex-grow: 1;
padding: 20px;
overflow-y: auto;
background: transparent;
}
.dashboard-header {
margin-bottom: 30px;
}
.dashboard-header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.create-new {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.item {
background-color: var(--glass-bg);
padding: 15px;
border-radius: var(--border-radius);
margin-bottom: 10px;
transition: background-color 0.3s ease, transform 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
}
.item:hover {
background-color: var(--hover-bg);
transform: scale(1.05);
backdrop-filter: blur(10px);
}
.user-profile {
display: flex;
align-items: center;
margin-top: auto;
padding-top: 20px;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary-color);
margin-right: 10px;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.user-avatar:hover {
transform: scale(1.1);
color: var(--text-color);
}
.account-button:hover {
transform: scale(1.05);
}
.account-button:focus {
outline: none;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--accent-color); /* Initial color is accent color */
margin-right: 10px;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.user-avatar:hover {
transform: scale(1.1);
}
.calculator {
width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.calculator-screen {
width: 100%;
height: 50px;
background-color: #e0e0e0;
border: none;
padding: 10px;
text-align: right;
font-size: 24px;
border-radius: 5px;
margin-bottom: 10px;
}
.calculator-keys {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
}
.calculator-keys button {
height: 50px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
}
.calculator-keys button:hover {
background-color: #e0e0e0;
}
#graph-container {
margin-top: 20px;
}
#graph {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<button class="sidebar-toggle">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="container">
<div class="sidebar">
<div class="logo" onclick="window.location.href='index.html'">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
TaskMaster AI
</div>
<div class="menu-item">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 22V12H15V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Dashboard
</div>
<div class="menu-item" onclick="window.location.href='account.html'">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12.9046 3.06005C12.6988 3 12.4659 3 12 3C11.5341 3 11.3012 3 11.0954 3.06005C10.7942 3.14794 10.5281 3.32808 10.3346 3.57511C10.2024 3.74388 10.1159 3.96016 9.94291 4.39272C9.69419 5.01452 9.00393 5.33471 8.36857 5.123L7.79779 4.93281C7.3929 4.79785 7.19045 4.73036 6.99196 4.7188C6.70039 4.70181 6.4102 4.77032 6.15701 4.9159C5.98465 5.01501 5.83376 5.16591 5.53197 5.4677C5.21122 5.78845 5.05084 5.94882 4.94896 6.13189C4.79927 6.40084 4.73595 6.70934 4.76759 7.01551C4.78912 7.2239 4.87335 7.43449 5.04182 7.85566C5.30565 8.51523 5.05184 9.26878 4.44272 9.63433L4.16521 9.80087C3.74031 10.0558 3.52786 10.1833 3.37354 10.3588C3.23698 10.5141 3.13401 10.696 3.07109 10.893C3 11.1156 3 11.3658 3 11.8663C3 12.4589 3 12.7551 3.09462 13.0088C3.17823 13.2329 3.31422 13.4337 3.49124 13.5946C3.69158 13.7766 3.96395 13.8856 4.50866 14.1035C5.06534 14.3261 5.35196 14.9441 5.16236 15.5129L4.94721 16.1584C4.79819 16.6054 4.72367 16.829 4.7169 17.0486C4.70875 17.3127 4.77049 17.5742 4.89587 17.8067C5.00015 18.0002 5.16678 18.1668 5.5 18.5C5.83323 18.8332 5.99985 18.9998 6.19325 19.1041C6.4258 19.2295 6.68733 19.2913 6.9514 19.2831C7.17102 19.2763 7.39456 19.2018 7.84164 19.0528L8.36862 18.8771C9.00393 18.6654 9.6942 18.9855 9.94291 19.6073C10.1159 20.0398 10.2024 20.2561 10.3346 20.4249C10.5281 20.6719 10.7942 20.8521 11.0954 20.94C11.3012 21 11.5341 21 12 21C12.4659 21 12.6988 21 12.9046 20.94C13.2058 20.8521 13.4719 20.6719 13.6654 20.4249C13.7976 20.2561 13.8841 20.0398 14.0571 19.6073C14.3058 18.9855 14.9961 18.6654 15.6313 18.8773L16.1579 19.0529C16.605 19.2019 16.8286 19.2764 17.0482 19.2832C17.3123 19.2913 17.5738 19.2296 17.8063 19.1042C17.9997 18.9999 18.1664 18.8333 18.4996 18.5001C18.8328 18.1669 18.9994 18.0002 19.1037 17.8068C19.2291 17.5743 19.2908 17.3127 19.2827 17.0487C19.2759 16.8291 19.2014 16.6055 19.0524 16.1584L18.8374 15.5134C18.6477 14.9444 18.9344 14.3262 19.4913 14.1035C20.036 13.8856 20.3084 13.7766 20.5088 13.5946C20.6858 13.4337 20.8218 13.2329 20.9054 13.0088C21 12.7551 21 12.4589 21 11.8663C21 11.3658 21 11.1156 20.9289 10.893C20.866 10.696 20.763 10.5141 20.6265 10.3588C20.4721 10.1833 20.2597 10.0558 19.8348 9.80087L19.5569 9.63416C18.9478 9.26867 18.6939 8.51514 18.9578 7.85558C19.1262 7.43443 19.2105 7.22383 19.232 7.01543C19.2636 6.70926 19.2003 6.40077 19.0506 6.13181C18.9487 5.94875 18.7884 5.78837 18.4676 5.46762C18.1658 5.16584 18.0149 5.01494 17.8426 4.91583C17.5894 4.77024 17.2992 4.70174 17.0076 4.71872C16.8091 4.73029 16.6067 4.79777 16.2018 4.93273L15.6314 5.12287C14.9961 5.33464 14.3058 5.0145 14.0571 4.39272C13.8841 3.96016 13.7976 3.74388 13.6654 3.57511C13.4719 3.32808 13.2058 3.14794 12.9046 3.06005Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
Settings
</div>
<div class="menu-item toggle-night-mode" onclick="toggleNightMode()">
<div class="theme-icon">
<svg id="theme-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</div>
Theme
</div>
<div class="menu-item" onclick="window.location.href='notes.html'">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M10 12H14M12 10V14M19.9592 15H16.6C16.0399 15 15.7599 15 15.546 15.109C15.3578 15.2049 15.2049 15.3578 15.109 15.546C15 15.7599 15 16.0399 15 16.6V19.9592M20 14.1031V7.2C20 6.07989 20 5.51984 19.782 5.09202C19.5903 4.71569 19.2843 4.40973 18.908 4.21799C18.4802 4 17.9201 4 16.8 4H7.2C6.0799 4 5.51984 4 5.09202 4.21799C4.71569 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.0799 4 7.2V16.8C4 17.9201 4 18.4802 4.21799 18.908C4.40973 19.2843 4.71569 19.5903 5.09202 19.782C5.51984 20 6.0799 20 7.2 20H14.1031C14.5923 20 14.8369 20 15.067 19.9447C15.2711 19.8957 15.4662 19.8149 15.6451 19.7053C15.847 19.5816 16.0199 19.4086 16.3658 19.0627L19.0627 16.3658C19.4086 16.0199 19.5816 15.847 19.7053 15.6451C19.8149 15.4662 19.8957 15.2711 19.9447 15.067C20 14.8369 20 14.5923 20 14.1031Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
Notes
</div>
<div class="menu-item" onclick="window.location.href='calendar.html'">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M3 9H21M7 3V5M17 3V5M6 12H8M11 12H13M16 12H18M6 15H8M11 15H13M16 15H18M6 18H8M11 18H13M16 18H18M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path> </g></svg>
Calendar
</div>
<div class="menu-item" onclick="window.location.href='friends.html'">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" stroke-width="4.672" stroke="#ffffff" fill="none"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><circle cx="29.22" cy="16.28" r="11.14"></circle><path d="M41.32,35.69c-2.69-1.95-8.34-3.25-12.1-3.25h0A22.55,22.55,0,0,0,6.67,55h29.9"></path><circle cx="45.38" cy="46.92" r="11.94"></circle><line x1="45.98" y1="39.8" x2="45.98" y2="53.8"></line><line x1="38.98" y1="46.8" x2="52.98" y2="46.8"></line></g></svg>
Friends
</div>
<button class="upgrade-btn" onclick="window.location.href='pricing.html'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 8l10 14L22 8l-4-6H6L2 8z"/>
<path d="M2 8h20"/>
<path d="M12 2v20"/>
</svg>
Upgrade to Premium
</button>
<div class="user-profile" onclick="window.location.href='account.html'">
<button class="account-button">
<div class="user-avatar">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 4C14.21 4 16 5.79 16 8C16 10.21 14.21 12 12 12C9.79 12 8 10.21 8 8C8 5.79 9.79 4 12 4ZM12 20C9.33 20 6.34 18.87 4.63 16.74C5.91 15.43 8.39 14.5 12 14.5C15.61 14.5 18.09 15.43 19.37 16.74C17.66 18.87 14.67 20 12 20Z" fill="currentColor"/>
</svg>
</div>
<div id="username">User Name</div>
<div class="menu-dots">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
<div class="main-content">
<div class="calculator">
<input type="text" class="calculator-screen" id="calculatorScreen" readonly />
<div class="calculator-keys">
<button onclick="appendCharacter('7')">7</button>
<button onclick="appendCharacter('8')">8</button>
<button onclick="appendCharacter('9')">9</button>
<button onclick="appendCharacter('/')">/</button>
<button onclick="clearScreen()">C</button>
<button onclick="appendCharacter('4')">4</button>
<button onclick="appendCharacter('5')">5</button>
<button onclick="appendCharacter('6')">6</button>
<button onclick="appendCharacter('*')">*</button>
<button onclick="appendCharacter('(')">(</button>
<button onclick="appendCharacter('1')">1</button>
<button onclick="appendCharacter('2')">2</button>
<button onclick="appendCharacter('3')">3</button>
<button onclick="appendCharacter('-')">-</button>
<button onclick="appendCharacter(')')">)</button>
<button onclick="appendCharacter('0')">0</button>
<button onclick="appendCharacter('.')">.</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendCharacter('+')">+</button>
<button onclick="appendCharacter('^')">^</button>
<button onclick="appendCharacter('sin(')">sin</button>
<button onclick="appendCharacter('cos(')">cos</button>
<button onclick="appendCharacter('tan(')">tan</button>
<button onclick="appendCharacter('log(')">log</button>
<button onclick="appendCharacter('sqrt(')">√</button>
</div>
<div id="graph-container">
<canvas id="graph"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function appendCharacter(character) {
const screen = document.getElementById('calculatorScreen');
screen.value += character;
}
function clearScreen() {
document.getElementById('calculatorScreen').value = '';
}
function calculateResult() {
const screen = document.getElementById('calculatorScreen');
try {
screen.value = eval(screen.value.replace('^', '**').replace('√', 'Math.sqrt'));
} catch (error) {
screen.value = 'Error';
}
}
// Simple graphing capability
function plotGraph(expression) {
const ctx = document.getElementById('graph').getContext('2d');
const xValues = [];
const yValues = [];
for (let x = -10; x <= 10; x += 0.1) {
xValues.push(x);
try {
yValues.push(eval(expression.replace(/x/g, x)));
} catch (error) {
yValues.push(null);
}
}
new Chart(ctx, {
type: 'line',
data: {
labels: xValues,
datasets: [{
label: 'y = ' + expression,
data: yValues,
borderColor: 'rgba(75, 192, 192, 1)',
fill: false,
borderWidth: 2,
pointRadius: 0
}]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
}
}
}
});
}
// Example to plot a graph on load (e.g., y = x^2)
document.addEventListener('DOMContentLoaded', function () {
plotGraph('x**2');
});
</script>
</body>
</html>