Hugging Face's logo

Spaces:
cloudjumbo
/
sf-2c6
Running

App Files Community
cloudjumbo commited on
Commit
ef3df75
·
verified ·
1 Parent(s): 30ef5da

Add 5 files

Browse files
Files changed (5) hide show
  1. App.vue +46 -0
  2. app.js +56 -0
  3. index.html +1 -19
  4. main.js +4 -0
  5. style.css +36 -18
App.vue ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <template>
2
+ <div x-data="{ ...todos, countdown: 10 }" :class="{ done: done }">
3
+ <div v-if="done">
4
+ <h1>Completed!</h1>
5
+ </div>
6
+ <div v-else>
7
+ <h1>Todo List</h1>
8
+ <ol>
9
+ <li v-for="todo in todos" x-transition>
10
+ <Checkbox v-model="todo.completed" @toggle="completeTodo(todo)" />
11
+ {{ todo.title }}
12
+ {{ todo.completed ? 'done' : 'to-do' }}
13
+ </li>
14
+ </ol>
15
+ <div class="footer">
16
+ <p>{{ countdown }} seconds left</p>
17
+ </div>
18
+ <button x-data="{ show: true }" x-show="show" x-on:click="show = false">Stop Timer</button>
19
+ </div>
20
+ </div>
21
+ </template>
22
+
23
+ <script>
24
+ export default {
25
+ data() {
26
+ return {
27
+ todos: [
28
+ { title: 'Todo 1', completed: false },
29
+ { title: 'Todo 2', completed: false },
30
+ { title: 'Todo 3', completed: false },
31
+ { title: 'Todo 4', completed: false },
32
+ { title: 'Todo 5', completed: false }
33
+ ]
34
+ }
35
+ },
36
+ methods: {
37
+ completeTodo(todo) {
38
+ todo.completed = !todo.completed
39
+ this.countdown = 10
40
+ }
41
+ },
42
+ mounted() {
43
+ console.log('mounted')
44
+ }
45
+ }
46
+ </script>
app.js ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // App Data
2
+ const todos = [
3
+ { title: 'Todo 1', completed: false },
4
+ { title: 'Todo 2', completed: false },
5
+ { title: 'Todo 3', completed: false },
6
+ { title: 'Todo 4', completed: false },
7
+ { title: 'Todo 5', completed: false }
8
+ ]
9
+
10
+ // AlpineJS App
11
+ const app = document.getElementById('app')
12
+
13
+ app.innerHTML = `
14
+ <div class="container">
15
+ <h1>Todo List</h1>
16
+ <ol>
17
+ <li v-for="todo in todos" x-transition>
18
+ <Checkbox v-model="todo.completed" @toggle="completeTodo(todo)" />
19
+ {{ todo.title }}
20
+ {{ todo.completed ? 'done' : 'to-do' }}
21
+ </li>
22
+ </ol>
23
+ <div class="footer">
24
+ <p>{{ countdown }} seconds left</p>
25
+ </div>
26
+ <button x-data="{ show: true }" x-show="show" x-on:click="show = false">Stop Timer</button>
27
+ </div>
28
+ `
29
+
30
+ // Completed Todo List
31
+ const completedTodos = todos.filter((todo) => todo.completed)
32
+ const completedTodosList = document.getElementById('completedTodos')
33
+
34
+ completedTodosList.innerHTML = `
35
+ <div class="container">
36
+ <h1>Completed Todos</h1>
37
+ <ol>
38
+ <li v-for="todo in completedTodos" x-transition>
39
+ <Checkbox v-model="todo.completed" @toggle="completeTodo(todo)" />
40
+ {{ todo.title }}
41
+ {{ todo.completed ? 'done' : 'to-do' }}
42
+ </li>
43
+ </ol>
44
+ </div>
45
+ `
46
+
47
+ // Start Timer
48
+ const timer = 10
49
+ const countdown = document.getElementById('countdown')
50
+
51
+ countdown.innerHTML = `
52
+ <div class="container">
53
+ <h1>Timer</h1>
54
+ <p>${timer} seconds left</p>
55
+ </div>
56
+ `
index.html CHANGED
@@ -1,19 +1 @@
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>Todo List App</title></head><body><div class="container" @init="countdown = 0"><h1>Todo List</h1><ol><li v-for="todo in todos" x-transition><Checkbox v-model="todo.completed" @toggle="completeTodo(todo)" />{{ todo.title }}{{ todo.completed ? 'done' : 'to-do' }}</li></ol><div class="footer"><p>{{ countdown }} seconds left</p></div><button x-data="{ show: true }" x-show="show" x-on:click="show = false">Stop Timer</button></div></body></html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
main.js ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ import {createApp} from 'vue'
2
+ import App from './App.vue'
3
+
4
+ createApp(App).mount('#app')
style.css CHANGED
@@ -1,28 +1,46 @@
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
28
  }
 
 
 
 
 
1
  body {
2
+ font-family: Arial, sans-serif;
3
+ text-align: center;
4
  }
5
 
6
+ .container {
7
+ margin: 20px auto;
8
+ width: 600px;
9
+ height: 400px;
10
+ background-color: #f0f0f0;
11
+ border: 1px solid #ccc;
12
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
13
+ padding: 20px;
14
+ font-size: 20px;
15
  }
16
 
17
+ .footer {
18
+ position: fixed;
19
+ left: 0;
20
+ bottom: 0;
21
+ width: 100%;
22
+ background-color: #333;
23
+ color: white;
24
+ text-align: center;
25
+ padding: 10px;
26
  }
27
 
28
+ .checkbox {
29
+ width: 20px;
30
+ height: 20px;
31
+ margin: 0 5px 0 20px;
 
 
32
  }
33
 
34
+ button {
35
+ padding: 10px 20px;
36
+ font-size: 20px;
37
+ border-radius: 5px;
38
+ border: none;
39
+ background-color: #4CAF50;
40
+ color: white;
41
+ cursor: pointer;
42
  }
43
+
44
+ button:hover {
45
+ background-color: #3e8e41;
46
+ }