Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Todo Master - Advanced Task Manager</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #667eea; | |
| --primary-dark: #5a67d8; | |
| --secondary-color: #48bb78; | |
| --danger-color: #f56565; | |
| --warning-color: #ed8936; | |
| --bg-primary: #ffffff; | |
| --bg-secondary: #f7fafc; | |
| --bg-tertiary: #edf2f7; | |
| --text-primary: #2d3748; | |
| --text-secondary: #4a5568; | |
| --text-tertiary: #718096; | |
| --border-color: #e2e8f0; | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); | |
| --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15); | |
| --radius: 12px; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| [data-theme="dark"] { | |
| --primary-color: #7c3aed; | |
| --primary-dark: #6d28d9; | |
| --secondary-color: #10b981; | |
| --danger-color: #ef4444; | |
| --warning-color: #f59e0b; | |
| --bg-primary: #1a202c; | |
| --bg-secondary: #2d3748; | |
| --bg-tertiary: #4a5568; | |
| --text-primary: #f7fafc; | |
| --text-secondary: #e2e8f0; | |
| --text-tertiary: #a0aec0; | |
| --border-color: #4a5568; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| transition: var(--transition); | |
| } | |
| .container { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| animation: slideDown 0.5s ease-out; | |
| } | |
| .logo { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 10px; | |
| } | |
| .logo i { | |
| font-size: 36px; | |
| color: var(--primary-color); | |
| animation: pulse 2s infinite; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 8px; | |
| } | |
| .subtitle { | |
| color: var(--text-secondary); | |
| font-size: 1.1rem; | |
| } | |
| .built-with { | |
| margin-top: 10px; | |
| font-size: 0.9rem; | |
| } | |
| .built-with a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: var(--transition); | |
| } | |
| .built-with a:hover { | |
| color: var(--primary-dark); | |
| transform: translateY(-2px); | |
| display: inline-block; | |
| } | |
| .stats-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 15px; | |
| margin-bottom: 30px; | |
| animation: fadeIn 0.6s ease-out 0.2s both; | |
| } | |
| .stat-card { | |
| background: var(--bg-primary); | |
| padding: 20px; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow-sm); | |
| text-align: center; | |
| transition: var(--transition); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .stat-number { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| margin-top: 5px; | |
| } | |
| .controls { | |
| background: var(--bg-primary); | |
| padding: 25px; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow-md); | |
| margin-bottom: 25px; | |
| animation: fadeIn 0.6s ease-out 0.3s both; | |
| } | |
| .input-group { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .todo-input { | |
| flex: 1; | |
| min-width: 200px; | |
| padding: 12px 16px; | |
| border: 2px solid var(--border-color); | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| transition: var(--transition); | |
| } | |
| .todo-input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| background: var(--bg-primary); | |
| } | |
| .select-input { | |
| padding: 12px 16px; | |
| border: 2px solid var(--border-color); | |
| border-radius: 8px; | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .select-input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| .btn { | |
| padding: 12px 24px; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--border-color); | |
| } | |
| .btn-danger { | |
| background: var(--danger-color); | |
| color: white; | |
| } | |
| .btn-danger:hover { | |
| background: #e53e3e; | |
| } | |
| .filters { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .filter-buttons { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .filter-btn { | |
| padding: 8px 16px; | |
| border: 2px solid var(--border-color); | |
| background: var(--bg-primary); | |
| color: var(--text-secondary); | |
| border-radius: 20px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-weight: 500; | |
| } | |
| .filter-btn.active { | |
| background: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| } | |
| .filter-btn:hover:not(.active) { | |
| border-color: var(--primary-color); | |
| color: var(--primary-color); | |
| } | |
| .search-box { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .search-input { | |
| padding: 8px 16px; | |
| border: 2px solid var(--border-color); | |
| border-radius: 20px; | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| width: 200px; | |
| transition: var(--transition); | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| width: 250px; | |
| } | |
| .theme-toggle { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| background: var(--bg-primary); | |
| border: 2px solid var(--border-color); | |
| border-radius: 50%; | |
| width: 50px; | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| box-shadow: var(--shadow-md); | |
| transition: var(--transition); | |
| z-index: 1000; | |
| } | |
| .theme-toggle:hover { | |
| transform: rotate(180deg); | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .todo-list { | |
| background: var(--bg-primary); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow-md); | |
| padding: 20px; | |
| min-height: 300px; | |
| animation: fadeIn 0.6s ease-out 0.4s both; | |
| } | |
| .todo-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| padding: 15px; | |
| margin-bottom: 10px; | |
| background: var(--bg-secondary); | |
| border-radius: 8px; | |
| border-left: 4px solid transparent; | |
| transition: var(--transition); | |
| cursor: move; | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| .todo-item:hover { | |
| transform: translateX(5px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .todo-item.dragging { | |
| opacity: 0.5; | |
| transform: rotate(2deg); | |
| } | |
| .todo-item.priority-high { | |
| border-left-color: var(--danger-color); | |
| } | |
| .todo-item.priority-medium { | |
| border-left-color: var(--warning-color); | |
| } | |
| .todo-item.priority-low { | |
| border-left-color: var(--secondary-color); | |
| } | |
| .todo-item.completed { | |
| opacity: 0.7; | |
| } | |
| .todo-item.completed .todo-text { | |
| text-decoration: line-through; | |
| color: var(--text-tertiary); | |
| } | |
| .checkbox { | |
| width: 24px; | |
| height: 24px; | |
| cursor: pointer; | |
| accent-color: var(--primary-color); | |
| } | |
| .custom-checkbox { | |
| width: 24px; | |
| height: 24px; | |
| border: 2px solid var(--border-color); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| flex-shrink: 0; | |
| } | |
| .custom-checkbox:hover { | |
| border-color: var(--primary-color); | |
| } | |
| .custom-checkbox.checked { | |
| background: var(--primary-color); | |
| border-color: var(--primary-color); | |
| } | |
| .custom-checkbox.checked::after { | |
| content: '✓'; | |
| color: white; | |
| font-weight: bold; | |
| } | |
| .todo-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .todo-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .todo-text { | |
| flex: 1; | |
| font-size: 1rem; | |
| color: var(--text-primary); | |
| word-break: break-word; | |
| } | |
| .todo-meta { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| font-size: 0.85rem; | |
| color: var(--text-tertiary); | |
| } | |
| .category-badge { | |
| padding: 2px 8px; | |
| background: var(--bg-tertiary); | |
| border-radius: 12px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .priority-badge { | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: white; | |
| } | |
| .priority-badge.high { | |
| background: var(--danger-color); | |
| } | |
| .priority-badge.medium { | |
| background: var(--warning-color); | |
| } | |
| .priority-badge.low { | |
| background: var(--secondary-color); | |
| } | |
| .due-date { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .todo-actions { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .action-btn { | |
| width: 32px; | |
| height: 32px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-tertiary); | |
| cursor: pointer; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| } | |
| .action-btn:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .action-btn.delete:hover { | |
| background: var(--danger-color); | |
| color: white; | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 60px 20px; | |
| color: var(--text-tertiary); | |
| } | |
| .empty-state i { | |
| font-size: 64px; | |
| margin-bottom: 20px; | |
| opacity: 0.5; | |
| } | |
| .empty-state h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 10px; | |
| color: var(--text-secondary); | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 8px; | |
| background: var(--bg-tertiary); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-top: 20px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); | |
| transition: width 0.5s ease; | |
| border-radius: 4px; | |
| } | |
| @keyframes slideDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.1); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .stats-container { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .filters { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .search-input { | |
| width: 100%; | |
| } | |
| .search-input:focus { | |
| width: 100%; | |
| } | |
| .filter-buttons { | |
| justify-content: center; | |
| } | |
| .todo-item { | |
| flex-wrap: wrap; | |
| } | |
| .todo-actions { | |
| width: 100%; | |
| justify-content: flex-end; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 10px; | |
| } | |
| .controls { | |
| padding: 15px; | |
| } | |
| .input-group { | |
| flex-direction: column; | |
| } | |
| .todo-input { | |
| width: 100%; | |
| } | |
| .stats-container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .toast { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: var(--bg-primary); | |
| padding: 16px 20px; | |
| border-radius: 8px; | |
| box-shadow: var(--shadow-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| transform: translateX(400px); | |
| transition: transform 0.3s ease; | |
| z-index: 1001; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast.success { | |
| border-left: 4px solid var(--secondary-color); | |
| } | |
| .toast.error { | |
| border-left: 4px solid var(--danger-color); | |
| } | |
| .toast.info { | |
| border-left: 4px solid var(--primary-color); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button class="theme-toggle" onclick="toggleTheme()"> | |
| <i class="fas fa-moon" id="themeIcon"></i> | |
| </button> | |
| <div class="container"> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-tasks"></i> | |
| <h1>Todo Master</h1> | |
| </div> | |
| <p class="subtitle">Organize your life, one task at a time</p> | |
| <p class="built-with">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" | |
| target="_blank">anycoder</a></p> | |
| </header> | |
| <div class="stats-container"> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="totalTasks">0</div> | |
| <div class="stat-label">Total Tasks</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="completedTasks">0</div> | |
| <div class="stat-label">Completed</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="pendingTasks">0</div> | |
| <div class="stat-label">Pending</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="completionRate">0%</div> | |
| <div class="stat-label">Completion Rate</div> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <div class="input-group"> | |
| <input type="text" class="todo-input" id="todoInput" placeholder="What needs to be done today?"> | |
| <select class="select-input" id="categorySelect"> | |
| <option value="personal">Personal</option> | |
| <option value="work">Work</option> | |
| <option value="shopping">Shopping</option> | |
| <option value="health">Health</option> | |
| <option value="education">Education</option> | |
| <option value="other">Other</option> | |
| </select> | |
| <select class="select-input" id="prioritySelect"> | |
| <option value="low">Low Priority</option> | |
| <option value="medium">Medium Priority</option> | |
| <option value="high">High Priority</option> | |
| </select> | |
| <input type="date" class="select-input" id="dueDateInput"> | |
| <button class="btn btn-primary" onclick="addTodo()"> | |
| <i class="fas fa-plus"></i> Add Task | |
| </button> | |
| </div> | |
| <div class="filters"> | |
| <div class="filter-buttons"> | |
| <button class="filter-btn active" onclick="filterTodos('all')">All</button> | |
| <button class="filter-btn" onclick="filterTodos('active')">Active</button> | |
| <button class="filter-btn" onclick="filterTodos('completed')">Completed</button> | |
| <button class="btn btn-secondary" onclick="clearCompleted()"> | |
| <i class="fas fa-trash"></i> Clear Completed | |
| </button> | |
| </div> | |
| <div class="search-box"> | |
| <input type="text" class="search-input" id="searchInput" placeholder="Search tasks..." oninput="searchTodos()"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="todo-list" id="todoList"> | |
| <div class="empty-state"> | |
| <i class="fas fa-clipboard-list"></i> | |
| <h3>No tasks yet!</h3> | |
| <p>Start adding tasks to organize your day</p> | |
| </div> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="toast" id="toast"> | |
| <i class="fas fa-check-circle" id="toastIcon"></i> | |
| <span id="toastMessage">Task added successfully!</span> | |
| </div> | |
| <script> | |
| let todos = JSON.parse(localStorage.getItem('todos')) || []; | |
| let currentFilter = 'all'; | |
| let draggedItem = null; | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| loadTheme(); | |
| renderTodos(); | |
| updateStats(); | |
| // Add enter key support for input | |
| document.getElementById('todoInput').addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| addTodo(); | |
| } | |
| }); | |
| // Set today's date as default for due date | |
| const today = new Date().toISOString().split('T')[0]; | |
| document.getElementById('dueDateInput').value = today; | |
| }); | |
| function addTodo() { | |
| const input = document.getElementById('todoInput'); | |
| const category = document.getElementById('categorySelect').value; | |
| const priority = document.getElementById('prioritySelect').value; | |
| const dueDate = document.getElementById('dueDateInput').value; | |
| const text = input.value.trim(); | |
| if (text === '') { | |
| showToast('Please enter a task!', 'error'); | |
| return; | |
| } | |
| const todo = { | |
| id: Date.now(), | |
| text: text, | |
| completed: false, | |
| category: category, | |
| priority: priority, | |
| dueDate: dueDate, | |
| createdAt: new Date().toISOString() | |
| }; | |
| todos.unshift(todo); | |
| saveTodos(); | |
| renderTodos(); | |
| updateStats(); | |
| input.value = ''; | |
| showToast('Task added successfully!', 'success'); | |
| } | |
| function toggleTodo(id) { | |
| const todo = todos.find(t => t.id === id); | |
| if (todo) { | |
| todo.completed = !todo.completed; | |
| saveTodos(); | |
| renderTodos(); | |
| updateStats(); | |
| showToast(todo.completed ? 'Task completed!' : 'Task marked as active', 'info'); | |
| } | |
| } | |
| function deleteTodo(id) { | |
| todos = todos.filter(t => t.id !== id); | |
| saveTodos(); | |
| renderTodos(); | |
| updateStats(); | |
| showToast('Task deleted', 'info'); | |
| } | |
| function editTodo(id) { | |
| const todo = todos.find(t => t.id === id); | |
| if (todo) { | |
| const newText = prompt('Edit task:', todo.text); | |
| if (newText && newText.trim() !== '') { | |
| todo.text = newText.trim(); | |
| saveTodos(); | |
| renderTodos(); | |
| showToast('Task updated!', 'success'); | |
| } | |
| } | |
| } | |
| function filterTodos(filter) { | |
| currentFilter = filter; | |
| // Update active button | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| event.target.classList.add('active'); | |
| renderTodos(); | |
| } | |
| function searchTodos() { | |
| renderTodos(); | |
| } | |
| function clearCompleted() { | |
| const completedCount = todos.filter(t => t.completed).length; | |
| if (completedCount === 0) { | |
| showToast('No completed tasks to clear', 'info'); | |
| return; | |
| } | |
| if (confirm(`Are you sure you want to delete ${completedCount} completed task(s)?`)) { | |
| todos = todos.filter(t => !t.completed); | |
| saveTodos(); | |
| renderTodos(); | |
| updateStats(); | |
| showToast('Completed tasks cleared', 'success'); | |
| } | |
| } | |
| function renderTodos() { | |
| const todoList = document.getElementById('todoList'); | |
| const searchTerm = document.getElementById('searchInput').value.toLowerCase(); | |
| let filteredTodos = todos; | |
| // Apply filter | |
| if (currentFilter === 'active') { | |
| filteredTodos = filteredTodos.filter(t => !t.completed); | |
| } else if (currentFilter === 'completed') { | |
| filteredTodos = filteredTodos.filter(t => t.completed); | |
| } | |
| // Apply search | |
| if (searchTerm) { | |
| filteredTodos = filteredTodos.filter(t => | |
| t.text.toLowerCase().includes(searchTerm) || | |
| t.category.toLowerCase().includes(searchTerm) | |
| ); | |
| } | |
| if (filteredTodos.length === 0) { | |
| todoList.innerHTML = ` | |
| <div class="empty-state"> | |
| <i class="fas fa-clipboard-list"></i> | |
| <h3>No tasks found!</h3> | |
| <p>${currentFilter === 'completed' ? 'No completed tasks yet' : 'Start adding tasks to organize your day'}</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| todoList.innerHTML = filteredTodos.map(todo => { | |
| const dueDate = todo.dueDate ? new Date(todo.dueDate) : null; | |
| const today = new Date(); | |
| today.setHours(0, 0, 0, 0); | |
| const isOverdue = dueDate && dueDate < today && !todo.completed; | |
| return ` | |
| <div class="todo-item ${todo.completed ? 'completed' : ''} priority-${todo.priority}" | |
| draggable="true" | |
| ondragstart="handleDragStart(event, ${todo.id})" | |
| ondragover="handleDragOver(event)" | |
| ondrop="handleDrop(event, ${todo.id})" | |
| ondragend="handleDragEnd(event)"> | |
| <div class="custom-checkbox ${todo.completed ? 'checked' : ''}" | |
| onclick="toggleTodo(${todo.id})"></div> | |
| <div class="todo-content"> | |
| <div class="todo-header"> | |
| <span class="todo-text">${todo.text}</span> | |
| </div> | |
| <div class="todo-meta"> | |
| <span class="category-badge">${todo.category}</span> | |
| <span class="priority-badge ${todo.priority}">${todo.priority}</span> | |
| ${todo.dueDate ? ` | |
| <span class="due-date ${isOverdue ? 'overdue' : ''}"> | |
| <i class="fas fa-calendar"></i> | |
| ${formatDate(todo.dueDate)} | |
| ${isOverdue ? ' (Overdue)' : ''} | |
| </span> | |
| ` : ''} | |
| </div> | |
| </div> | |
| <div class="todo-actions"> | |
| <button class="action-btn" onclick="editTodo(${todo.id})" title="Edit"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="action-btn delete" onclick="deleteTodo(${todo.id})" title="Delete"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| }).join(''); | |
| } | |
| function handleDragStart(e, id) { | |
| draggedItem = id; | |
| e.target.classList.add('dragging'); | |
| } | |
| function handleDragOver(e) { | |
| e.preventDefault(); | |
| } | |
| function handleDrop(e, targetId) { | |
| e.preventDefault(); | |
| if (draggedItem && draggedItem !== targetId) { | |
| const draggedIndex = todos.findIndex(t => t.id === draggedItem); | |
| const targetIndex = todos.findIndex(t => t.id === targetId); | |
| if (draggedIndex !== -1 && targetIndex !== -1) { | |
| const [draggedTodo] = todos.splice(draggedIndex, 1); | |
| todos.splice(targetIndex, 0, draggedTodo); | |
| saveTodos(); | |
| renderTodos(); | |
| } | |
| } | |
| } | |
| function handleDragEnd(e) { | |
| e.target.classList.remove('dragging'); | |
| draggedItem = null; | |
| } | |
| function updateStats() { | |
| const total = todos.length; | |
| const completed = todos.filter(t => t.completed).length; | |
| const pending = total - completed; | |
| const rate = total > 0 ? Math.round((completed / total) * 100) : 0; | |
| document.getElementById('totalTasks').textContent = total; | |
| document.getElementById('completedTasks').textContent = completed; | |
| document.getElementById('pendingTasks').textContent = pending; | |
| document.getElementById('completionRate').textContent = rate + '%'; | |
| document.getElementById('progressFill').style.width = rate + '%'; | |
| } | |
| function saveTodos() { | |
| localStorage.setItem('todos', JSON.stringify(todos)); | |
| } | |
| function formatDate(dateString) { | |
| const options = { month: 'short', day: 'numeric', year: 'numeric' }; | |
| return new Date(dateString).toLocaleDateString('en-US', options); | |
| } | |
| function toggleTheme() { | |
| const currentTheme = document.documentElement.getAttribute('data-theme'); | |
| const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; | |
| document.documentElement.setAttribute('data-theme', newTheme); | |
| localStorage.setItem('theme', newTheme); | |
| const icon = document.getElementById('themeIcon'); | |
| icon.className = newTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon'; | |
| } | |
| function loadTheme() { | |
| const savedTheme = localStorage.getItem('theme') || 'light'; | |
| document.documentElement.setAttribute('data-theme', savedTheme); | |
| const icon = document.getElementById('themeIcon'); | |
| icon.className = savedTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon'; | |
| } | |
| function showToast(message, type = 'success') { | |
| const toast = document.getElementById('toast'); | |
| const toastMessage = document.getElementById('toastMessage'); | |
| const toastIcon = document.getElementById('toastIcon'); | |
| toastMessage.textContent = message; | |
| toast.className = `toast ${type}`; | |
| if (type === 'success') { | |
| toastIcon.className = 'fas fa-check-circle'; | |
| } else if (type === 'error') { | |
| toastIcon.className = 'fas fa-exclamation-circle'; | |
| } else { | |
| toastIcon.className = 'fas fa-info-circle'; | |
| } | |
| toast.classList.add('show'); | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| </script> | |
| </body> | |
| </html> |