Hugging Face's logo

Spaces:
Blasitoo
/
sf-175
Running

App Files Community
Blasitoo commited on
Commit
864e708
·
verified ·
1 Parent(s): fe37127

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +39 -19
  2. main.js +78 -0
index.html CHANGED
@@ -1,19 +1,39 @@
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
+ <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Calculator</title></head><body>
2
+
3
+ <header class="p-4">
4
+ <h1 class="text-2xl font-bold">Calculator</h1>
5
+ <p class="text-gray-500">Use this calculator to perform basic arithmetic operations.</p>
6
+ </header>
7
+
8
+ <x-data="{ total: 0, newNum: '', selectedOperation: '', previousOperation: '', result: '' }`"></x-data>
9
+ <x-cloak>
10
+ <main class="px-8">
11
+ <div class="flex flex-col">
12
+ <form
13
+ x-init="function () {
14
+ calculateAndUpdateDisplay();
15
+ }"
16
+ >
17
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-html="display"></button>
18
+
19
+ <div class="flex flex-wrap">
20
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '1'">1</button>
21
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '2'">2</button>
22
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '3'">3</button>
23
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '+'">+</button>
24
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '-'">-</button>
25
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '*'">*</button>
26
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '/'">/</button>
27
+ </div>
28
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="clearAll()">AC</button>
29
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="clearNewNum()">CE</button>
30
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="addDecimal()">.</button>
31
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="calculateAndUpdateDisplay()">=</button>
32
+ </form>
33
+ </div>
34
+ </main>
35
+ </x-cloak>
36
+
37
+ </div>
38
+
39
+ </body></html>
main.js ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Define the application
2
+ const App = {
3
+ template: `<div class="flex flex-col h-screen">
4
+ <header class="p-4">
5
+ <h1 class="text-2xl font-bold">Calculator</h1>
6
+ <p class="text-gray-500">Use this calculator to perform basic arithmetic operations.</p>
7
+ </header>
8
+
9
+ <main class="px-8">
10
+ <div class="flex flex-wrap">
11
+ <calculator />
12
+ </div>
13
+ </main>
14
+
15
+ </div>`,
16
+
17
+ data() {
18
+ return {
19
+ display: 0,
20
+ newNum: '',
21
+ selectedOperation: '',
22
+ previousOperation: '',
23
+ result: ''
24
+ };
25
+ },
26
+
27
+ methods: {
28
+ calculateAndUpdateDisplay() {
29
+ if (this.selectedOperation === '') return;
30
+ if (this.newNum === '') return;
31
+ if (this.previousOperation === '+') {
32
+ this.result = this.display + parseInt(this.newNum);
33
+ } else if (this.previousOperation === '-') {
34
+ this.result = this.display - parseInt(this.newNum);
35
+ } else if (this.previousOperation === '*') {
36
+ this.result = this.display * parseInt(this.newNum);
37
+ } else if (this.previousOperation === '/') {
38
+ this.result = this.display / parseInt(this.newNum);
39
+ }
40
+ this.display = this.result;
41
+ this.newNum = '';
42
+ },
43
+
44
+ clearAll() {
45
+ this.display = 0;
46
+ this.newNum = '';
47
+ this.selectedOperation = '';
48
+ this.previousOperation = '';
49
+ this.result = '';
50
+ },
51
+
52
+ clearNewNum() {
53
+ this.newNum = '';
54
+ },
55
+
56
+ addDecimal() {
57
+ if (this.newNum === '') return;
58
+ this.newNum = `${this.newNum}.`;
59
+ }
60
+ }
61
+ };
62
+
63
+ // Initialize the calculator component
64
+ const calculator = Daisy.component({
65
+ template: `<div class="flex flex-col">
66
+ <div class="flex flex-wrap">
67
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '1'">1</button>
68
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '2'">2</button>
69
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '3'">3</button>
70
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '/'">/</button>
71
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '*'">*</button>
72
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="clearAll()">AC</button>
73
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="clearNewNum()">CE</button>
74
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="addDecimal()">.</button>
75
+ <button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="calculateAndUpdateDisplay()">=</button>
76
+ </div>
77
+ </div>`
78
+ });