Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern Todo App</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { --primary: #6c5ce7; --bg: #a29bfe; --glass: rgba(255, 255, 255, 0.9); --text: #2d3436; } | |
| * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; outline: none; } | |
| body { background: linear-gradient(135deg, #6c5ce7, #a29bfe); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } | |
| .app { background: var(--glass); width: 100%; max-width: 400px; border-radius: 20px; padding: 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); backdrop-filter: blur(10px); } | |
| header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } | |
| h1 { color: var(--primary); font-size: 24px; font-weight: 600; } | |
| .brand { font-size: 10px; color: #636e72; text-decoration: none; font-weight: 600; transition: 0.3s; } | |
| .brand:hover { color: var(--primary); } | |
| .input-group { position: relative; display: flex; margin-bottom: 20px; } | |
| input { width: 100%; padding: 15px 50px 15px 20px; border: none; background: #f1f2f6; border-radius: 50px; font-size: 14px; color: var(--text); transition: 0.3s; } | |
| input:focus { box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2); } | |
| #addBtn { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; border: none; background: var(--primary); color: white; border-radius: 50%; cursor: pointer; transition: 0.3s; } | |
| #addBtn:hover { transform: rotate(90deg); background: #5649c0; } | |
| .filters { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; } | |
| .filter-btn { font-size: 12px; color: #b2bec3; cursor: pointer; font-weight: 600; transition: 0.3s; } | |
| .filter-btn.active { color: var(--primary); } | |
| ul { list-style: none; max-height: 300px; overflow-y: auto; padding-right: 5px; } | |
| ul::-webkit-scrollbar { width: 5px; } | |
| ul::-webkit-scrollbar-thumb { background: #dfe6e9; border-radius: 10px; } | |
| li { background: white; padding: 12px 15px; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; animation: fadeIn 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: 0.3s; } | |
| li:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } | |
| li.completed { opacity: 0.6; text-decoration: line-through; background: #f1f2f6; } | |
| li span { flex: 1; margin: 0 10px; font-size: 14px; cursor: pointer; } | |
| .check { color: #dfe6e9; cursor: pointer; font-size: 18px; transition: 0.3s; } | |
| li.completed .check { color: var(--primary); } | |
| .del { color: #ff7675; cursor: pointer; opacity: 0; transition: 0.3s; font-size: 14px; } | |
| li:hover .del { opacity: 1; } | |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <header> | |
| <h1>My Tasks</h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand">Built with anycoder</a> | |
| </header> | |
| <div class="input-group"> | |
| <input type="text" id="input" placeholder="What needs to be done?"> | |
| <button id="addBtn"><i class="fas fa-plus"></i></button> | |
| </div> | |
| <div class="filters"> | |
| <span class="filter-btn active" onclick="filter('all')">All</span> | |
| <span class="filter-btn" onclick="filter('active')">Active</span> | |
| <span class="filter-btn" onclick="filter('completed')">Completed</span> | |
| </div> | |
| <ul id="list"></ul> | |
| </div> | |
| <script> | |
| const input = document.getElementById('input'); | |
| const list = document.getElementById('list'); | |
| let todos = JSON.parse(localStorage.getItem('todos')) || []; | |
| let currentFilter = 'all'; | |
| const save = () => localStorage.setItem('todos', JSON.stringify(todos)); | |
| const render = () => { | |
| list.innerHTML = ''; | |
| const filtered = todos.filter(t => currentFilter === 'all' ? true : currentFilter === 'completed' ? t.done : !t.done); | |
| filtered.forEach(t => { | |
| const li = document.createElement('li'); | |
| li.className = t.done ? 'completed' : ''; | |
| li.innerHTML = `<i class="fas fa-circle-check check" onclick="toggle(${t.id})"></i> | |
| <span onclick="toggle(${t.id})">${t.text}</span> | |
| <i class="fas fa-trash-alt del" onclick="remove(${t.id})"></i>`; | |
| list.appendChild(li); | |
| }); | |
| document.querySelectorAll('.filter-btn').forEach(b => b.classList.toggle('active', b.innerText.toLowerCase() === currentFilter || (b.innerText === 'All' && currentFilter === 'all'))); | |
| }; | |
| const add = () => { | |
| if (!input.value.trim()) return; | |
| todos.unshift({ id: Date.now(), text: input.value.trim(), done: false }); | |
| input.value = ''; save(); render(); | |
| }; | |
| const toggle = (id) => { todos = todos.map(t => t.id === id ? { ...t, done: !t.done } : t); save(); render(); }; | |
| const remove = (id) => { todos = todos.filter(t => t.id !== id); save(); render(); }; | |
| const filter = (type) => { currentFilter = type; render(); }; | |
| document.getElementById('addBtn').onclick = add; | |
| input.addEventListener('keypress', e => e.key === 'Enter' && add()); | |
| render(); | |
| </script> | |
| </body> | |
| </html> |