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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { font-family: 'Segoe UI', sans-serif; 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); } | |
| .todo-list { list-style: none; max-height: 350px; overflow-y: auto; } | |
| .todo-item { display: flex; align-items: center; gap: 12px; padding: 15px; background: #f8f9fa; border-radius: 12px; margin-bottom: 10px; transition: all 0.3s; animation: slideIn 0.3s ease; } | |
| @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } | |
| .todo-item:hover { background: #e9ecef; } | |
| .todo-item.completed span { text-decoration: line-through; color: #aaa; } | |
| .todo-item input[type="checkbox"] { width: 22px; height: 22px; accent-color: #667eea; cursor: pointer; } | |
| .todo-item span { flex: 1; font-size: 16px; color: #333; word-break: break-word; } | |
| .delete-btn { background: #ff6b6b; padding: 8px 12px; border-radius: 8px; font-size: 14px; } | |
| .delete-btn:hover { background: #ee5a5a; box-shadow: 0 3px 10px rgba(255,107,107,0.4); } | |
| .empty { text-align: center; color: #aaa; padding: 40px; font-size: 18px; } | |
| .stats { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 15px; border-top: 2px solid #e0e0e0; color: #666; font-size: 14px; } | |
| </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-check-circle"></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> | |
| <ul class="todo-list" id="todoList"></ul> | |
| <div class="stats"><span id="total">Total: 0</span><span id="completed">Completed: 0</span></div> | |
| </div> | |
| <script> | |
| let todos = JSON.parse(localStorage.getItem('todos')) || []; | |
| function saveTodos() { localStorage.setItem('todos', JSON.stringify(todos)); } | |
| function renderTodos() { | |
| const list = document.getElementById('todoList'); | |
| list.innerHTML = todos.length ? '' : '<li class="empty"><i class="fas fa-clipboard-list"></i><br>No tasks yet!</li>'; | |
| todos.forEach((todo, i) => { | |
| list.innerHTML += `<li class="todo-item ${todo.done ? 'completed' : ''}"><input type="checkbox" ${todo.done ? 'checked' : ''} onchange="toggleTodo(${i})"><span>${todo.text}</span><button class="delete-btn" onclick="deleteTodo(${i})"><i class="fas fa-trash"></i></button></li>`; | |
| }); | |
| document.getElementById('total').textContent = `Total: ${todos.length}`; | |
| document.getElementById('completed').textContent = `Completed: ${todos.filter(t => t.done).length}`; | |
| } | |
| function addTodo() { | |
| const input = document.getElementById('todoInput'), text = input.value.trim(); | |
| if (text) { todos.push({ text, done: false }); input.value = ''; saveTodos(); renderTodos(); } | |
| } | |
| function toggleTodo(i) { todos[i].done = !todos[i].done; saveTodos(); renderTodos(); } | |
| function deleteTodo(i) { todos.splice(i, 1); saveTodos(); renderTodos(); } | |
| renderTodos(); | |
| </script> | |
| </body> | |
| </html> |