Hugging Face's logo

Spaces:
akhaliq
/
ai-a4nb54xb
Running

App Files Community
akhaliq HF Staff commited on
Commit
536c170
·
verified ·
1 Parent(s): 053e03d

Upload folder using huggingface_hub

Browse files
Files changed (3) hide show
  1. index.html +32 -19
  2. script.js +65 -0
  3. style.css +130 -18
index.html CHANGED
@@ -1,19 +1,32 @@
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>Simple Todo App</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ </head>
9
+ <body>
10
+ <header>
11
+ <h1>Todo App <small><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a></small></h1>
12
+ </header>
13
+
14
+ <main>
15
+ <div class="container">
16
+ <form id="todo-form">
17
+ <input type="text" id="todo-input" placeholder="Add a new task..." required>
18
+ <button type="submit">Add</button>
19
+ </form>
20
+
21
+ <ul id="todo-list"></ul>
22
+
23
+ <div class="stats">
24
+ <span id="total-tasks">Total: 0</span>
25
+ <span id="completed-tasks">Completed: 0</span>
26
+ </div>
27
+ </div>
28
+ </main>
29
+
30
+ <script src="script.js"></script>
31
+ </body>
32
+ </html>
script.js ADDED
@@ -0,0 +1,65 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class TodoApp {
2
+ constructor() {
3
+ this.todos = JSON.parse(localStorage.getItem('todos')) || [];
4
+ this.init();
5
+ }
6
+
7
+ init() {
8
+ this.form = document.getElementById('todo-form');
9
+ this.input = document.getElementById('todo-input');
10
+ this.list = document.getElementById('todo-list');
11
+ this.totalSpan = document.getElementById('total-tasks');
12
+ this.completedSpan = document.getElementById('completed-tasks');
13
+
14
+ this.form.addEventListener('submit', (e) => this.addTodo(e));
15
+ this.render();
16
+ }
17
+
18
+ addTodo(e) {
19
+ e.preventDefault();
20
+ const text = this.input.value.trim();
21
+ if (text) {
22
+ this.todos.push({ id: Date.now(), text, completed: false });
23
+ this.input.value = '';
24
+ this.save();
25
+ this.render();
26
+ }
27
+ }
28
+
29
+ toggleTodo(id) {
30
+ this.todos = this.todos.map(todo =>
31
+ todo.id === id ? { ...todo, completed: !todo.completed } : todo
32
+ );
33
+ this.save();
34
+ this.render();
35
+ }
36
+
37
+ deleteTodo(id) {
38
+ this.todos = this.todos.filter(todo => todo.id !== id);
39
+ this.save();
40
+ this.render();
41
+ }
42
+
43
+ render() {
44
+ this.list.innerHTML = '';
45
+ this.todos.forEach(todo => {
46
+ const li = document.createElement('li');
47
+ li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
48
+ li.innerHTML = `
49
+ <span class="todo-text">${todo.text}</span>
50
+ <button class="delete-btn" onclick="app.deleteTodo(${todo.id})">Delete</button>
51
+ `;
52
+ li.addEventListener('click', () => this.toggleTodo(todo.id));
53
+ this.list.appendChild(li);
54
+ });
55
+
56
+ this.totalSpan.textContent = `Total: ${this.todos.length}`;
57
+ this.completedSpan.textContent = `Completed: ${this.todos.filter(t => t.completed).length}`;
58
+ }
59
+
60
+ save() {
61
+ localStorage.setItem('todos', JSON.stringify(this.todos));
62
+ }
63
+ }
64
+
65
+ const app = new TodoApp();
style.css CHANGED
@@ -1,28 +1,140 @@
 
 
 
 
 
 
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
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
  body {
8
+ font-family: system-ui, -apple-system, sans-serif;
9
+ line-height: 1.6;
10
+ color: #333;
11
+ background: #f5f5f5;
12
+ padding: 20px;
13
  }
14
 
15
+ header {
16
+ text-align: center;
17
+ margin-bottom: 2rem;
18
  }
19
 
20
+ header h1 {
21
+ color: #2c3e50;
22
+ font-size: 2.5rem;
 
 
23
  }
24
 
25
+ header small {
26
+ font-size: 0.8rem;
 
 
 
 
27
  }
28
 
29
+ header a {
30
+ color: #666;
31
+ text-decoration: none;
32
  }
33
+
34
+ header a:hover {
35
+ color: #2c3e50;
36
+ }
37
+
38
+ .container {
39
+ max-width: 500px;
40
+ margin: 0 auto;
41
+ background: white;
42
+ padding: 2rem;
43
+ border-radius: 10px;
44
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
45
+ }
46
+
47
+ #todo-form {
48
+ display: flex;
49
+ gap: 10px;
50
+ margin-bottom: 2rem;
51
+ }
52
+
53
+ #todo-input {
54
+ flex: 1;
55
+ padding: 12px;
56
+ border: 2px solid #ddd;
57
+ border-radius: 5px;
58
+ font-size: 16px;
59
+ }
60
+
61
+ #todo-input:focus {
62
+ outline: none;
63
+ border-color: #3498db;
64
+ }
65
+
66
+ button {
67
+ padding: 12px 24px;
68
+ background: #3498db;
69
+ color: white;
70
+ border: none;
71
+ border-radius: 5px;
72
+ cursor: pointer;
73
+ font-size: 16px;
74
+ }
75
+
76
+ button:hover {
77
+ background: #2980b9;
78
+ }
79
+
80
+ #todo-list {
81
+ list-style: none;
82
+ margin-bottom: 2rem;
83
+ }
84
+
85
+ .todo-item {
86
+ display: flex;
87
+ align-items: center;
88
+ padding: 12px;
89
+ background: #f8f9fa;
90
+ margin-bottom: 8px;
91
+ border-radius: 5px;
92
+ border-left: 4px solid #3498db;
93
+ }
94
+
95
+ .todo-item.completed {
96
+ opacity: 0.7;
97
+ border-left-color: #27ae60;
98
+ }
99
+
100
+ .todo-item.completed .todo-text {
101
+ text-decoration: line-through;
102
+ }
103
+
104
+ .todo-text {
105
+ flex: 1;
106
+ margin: 0 12px;
107
+ }
108
+
109
+ .delete-btn {
110
+ background: #e74c3c;
111
+ padding: 6px 12px;
112
+ font-size: 12px;
113
+ }
114
+
115
+ .delete-btn:hover {
116
+ background: #c0392b;
117
+ }
118
+
119
+ .stats {
120
+ display: flex;
121
+ justify-content: space-between;
122
+ font-size: 14px;
123
+ color: #666;
124
+ border-top: 1px solid #eee;
125
+ padding-top: 1rem;
126
+ }
127
+
128
+ @media (max-width: 600px) {
129
+ body {
130
+ padding: 10px;
131
+ }
132
+
133
+ .container {
134
+ padding: 1rem;
135
+ }
136
+
137
+ header h1 {
138
+ font-size: 2rem;
139
+ }
140
+ }