Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Todo App</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; } | |
| body { min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; justify-content: center; align-items: center; padding: 20px; } | |
| .container { background: white; border-radius: 20px; padding: 30px; width: 100%; max-width: 450px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } | |
| header { text-align: center; margin-bottom: 25px; } | |
| header a { font-size: 12px; color: #667eea; text-decoration: none; } | |
| header a:hover { text-decoration: underline; } | |
| h1 { color: #333; font-size: 28px; margin: 10px 0; } | |
| .input-group { display: flex; gap: 10px; margin-bottom: 20px; } | |
| input { flex: 1; padding: 15px; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 16px; transition: border-color 0.3s; } | |
| input:focus { outline: none; border-color: #667eea; } | |
| button { padding: 15px 25px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; border-radius: 12px; cursor: pointer; font-size: 16px; transition: transform 0.2s, box-shadow 0.2s; } | |
| button:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102,126,234,0.4); } | |
| .filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } | |
| .filter-btn { padding: 8px 16px; border: 2px solid #667eea; background: white; color: #667eea; border-radius: 20px; cursor: pointer; font-size: 14px; transition: all 0.3s; } | |
| .filter-btn.active, .filter-btn:hover { background: #667eea; color: white; } | |
| ul { list-style: none; max-height: 300px; overflow-y: auto; } | |
| li { display: flex; align-items: center; gap: 12px; padding: 15px; background: #f8f9fa; border-radius: 12px; margin-bottom: 10px; transition: all 0.3s; } | |
| li:hover { transform: translateX(5px); box-shadow: 0 3px 15px rgba(0,0,0,0.1); } | |
| li.completed span { text-decoration: line-through; color: #aaa; } | |
| li span { flex: 1; font-size: 16px; word-break: break-word; } | |
| li i { cursor: pointer; font-size: 18px; transition: color 0.2s; } | |
| .fa-check-circle { color: #28a745; } | |
| .fa-circle { color: #ddd; } | |
| .fa-trash { color: #dc3545; } | |
| .fa-trash:hover { color: #a71d2a; } | |
| .empty { text-align: center; color: #aaa; padding: 30px; } | |
| @media (max-width: 480px) { .container { padding: 20px; } h1 { font-size: 24px; } } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a><h1><i class="fas fa-tasks"></i> Todo App</h1></header> | |
| <div class="input-group"><input type="text" id="todoInput" placeholder="Add a new task..." onkeypress="if(event.key==='Enter')addTodo()"><button onclick="addTodo()"><i class="fas fa-plus"></i></button></div> | |
| <div class="filters"><button class="filter-btn active" onclick="setFilter('all',this)">All</button><button class="filter-btn" onclick="setFilter('active',this)">Active</button><button class="filter-btn" onclick="setFilter('completed',this)">Completed</button></div> | |
| <ul id="todoList"></ul> | |
| </div> | |
| <script> | |
| let todos = JSON.parse(localStorage.getItem('todos')) || [], filter = 'all'; | |
| const save = () => localStorage.setItem('todos', JSON.stringify(todos)); | |
| const render = () => { | |
| const list = document.getElementById('todoList'), filtered = todos.filter(t => filter === 'all' ? true : filter === 'active' ? !t.done : t.done); | |
| list.innerHTML = filtered.length ? filtered.map((t, i) => `<li class="${t.done ? 'completed' : ''}"><i class="fas fa-${t.done ? 'check-' : ''}circle" onclick="toggle(${todos.indexOf(t)})"></i><span>${t.text}</span><i class="fas fa-trash" onclick="remove(${todos.indexOf(t)})"></i></li>`).join('') : '<li class="empty">No tasks here!</li>'; | |
| }; | |
| const addTodo = () => { const input = document.getElementById('todoInput'); if (input.value.trim()) { todos.push({ text: input.value.trim(), done: false }); input.value = ''; save(); render(); } }; | |
| const toggle = i => { todos[i].done = !todos[i].done; save(); render(); }; | |
| const remove = i => { todos.splice(i, 1); save(); render(); }; | |
| const setFilter = (f, btn) => { filter = f; document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); render(); }; | |
| render(); | |
| </script> | |
| </body> | |
| </html> |