Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>To-Do List App</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #6c5ce7; | |
| --secondary-color: #a29bfe; | |
| --text-color: #2d3436; | |
| --light-gray: #f5f6fa; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--light-gray); | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| padding: 20px; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .container { | |
| max-width: 600px; | |
| width: 100%; | |
| background: white; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| padding: 30px; | |
| margin-top: 20px; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| width: 100%; | |
| } | |
| header h1 { | |
| color: var(--primary-color); | |
| margin-bottom: 10px; | |
| } | |
| .header-top { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .header-top a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-size: 14px; | |
| } | |
| .input-container { | |
| display: flex; | |
| margin-bottom: 20px; | |
| } | |
| #task-input { | |
| flex: 1; | |
| padding: 15px; | |
| border: 2px solid #dfe6e9; | |
| border-radius: 5px 0 0 5px; | |
| font-size: 16px; | |
| transition: border-color 0.3s; | |
| } | |
| #task-input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| #add-task { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 0 20px; | |
| border-radius: 0 5px 5px 0; | |
| cursor: pointer; | |
| font-size: 16px; | |
| transition: background-color 0.3s; | |
| } | |
| #add-task:hover { | |
| background-color: #5649c0; | |
| } | |
| .task-list { | |
| list-style: none; | |
| } | |
| .task-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px; | |
| background-color: white; | |
| border-radius: 5px; | |
| margin-bottom: 10px; | |
| box-shadow: var(--shadow); | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .task-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); | |
| } | |
| .task-item.completed { | |
| opacity: 0.7; | |
| } | |
| .task-item.completed .task-text { | |
| text-decoration: line-through; | |
| color: #7f8c8d; | |
| } | |
| .task-text { | |
| flex: 1; | |
| margin-left: 10px; | |
| } | |
| .task-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .task-actions button { | |
| background: none; | |
| border: none; | |
| color: #7f8c8d; | |
| cursor: pointer; | |
| font-size: 16px; | |
| transition: color 0.2s; | |
| } | |
| .task-actions button:hover { | |
| color: var(--primary-color); | |
| } | |
| .task-actions .complete-btn.completed { | |
| color: #2ecc71; | |
| } | |
| .stats { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 20px; | |
| padding-top: 20px; | |
| border-top: 1px solid #dfe6e9; | |
| font-size: 14px; | |
| color: #7f8c8d; | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 20px; | |
| } | |
| .input-container { | |
| flex-direction: column; | |
| } | |
| #task-input { | |
| border-radius: 5px; | |
| margin-bottom: 10px; | |
| } | |
| #add-task { | |
| border-radius: 5px; | |
| padding: 12px; | |
| } | |
| .task-item { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 10px; | |
| } | |
| .task-actions { | |
| width: 100%; | |
| justify-content: flex-end; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="header-top"> | |
| <h1>To-Do List</h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| <p>Organize your tasks efficiently</p> | |
| </header> | |
| <div class="input-container"> | |
| <input type="text" id="task-input" placeholder="Add a new task..."> | |
| <button id="add-task"><i class="fas fa-plus"></i></button> | |
| </div> | |
| <ul class="task-list" id="task-list"> | |
| <!-- Tasks will be added here dynamically --> | |
| </ul> | |
| <div class="stats"> | |
| <span id="total-tasks">0 tasks</span> | |
| <span id="completed-tasks">0 completed</span> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const taskInput = document.getElementById('task-input'); | |
| const addTaskBtn = document.getElementById('add-task'); | |
| const taskList = document.getElementById('task-list'); | |
| const totalTasks = document.getElementById('total-tasks'); | |
| const completedTasks = document.getElementById('completed-tasks'); | |
| let tasks = JSON.parse(localStorage.getItem('tasks')) || []; | |
| // Render tasks | |
| function renderTasks() { | |
| taskList.innerHTML = ''; | |
| let total = 0; | |
| let completed = 0; | |
| tasks.forEach((task, index) => { | |
| const taskItem = document.createElement('li'); | |
| taskItem.className = `task-item ${task.completed ? 'completed' : ''}`; | |
| taskItem.innerHTML = ` | |
| <div class="task-content"> | |
| <i class="fas fa-${task.completed ? 'check-circle' : 'circle'}"></i> | |
| <span class="task-text">${task.text}</span> | |
| </div> | |
| <div class="task-actions"> | |
| <button class="complete-btn" data-index="${index}"> | |
| <i class="fas fa-${task.completed ? 'undo' : 'check'}"></i> | |
| </button> | |
| <button class="delete-btn" data-index="${index}"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| `; | |
| taskList.appendChild(taskItem); | |
| total++; | |
| if (task.completed) completed++; | |
| }); | |
| totalTasks.textContent = `${total} task${total !== 1 ? 's' : ''}`; | |
| completedTasks.textContent = `${completed} completed`; | |
| } | |
| // Add new task | |
| function addTask() { | |
| const text = taskInput.value.trim(); | |
| if (text) { | |
| tasks.push({ text, completed: false }); | |
| saveTasks(); | |
| taskInput.value = ''; | |
| renderTasks(); | |
| } | |
| } | |
| // Toggle task completion | |
| function toggleTask(index) { | |
| tasks[index].completed = !tasks[index].completed; | |
| saveTasks(); | |
| renderTasks(); | |
| } | |
| // Delete task | |
| function deleteTask(index) { | |
| tasks.splice(index, 1); | |
| saveTasks(); | |
| renderTasks(); | |
| } | |
| // Save tasks to localStorage | |
| function saveTasks() { | |
| localStorage.setItem('tasks', JSON.stringify(tasks)); | |
| } | |
| // Event listeners | |
| addTaskBtn.addEventListener('click', addTask); | |
| taskInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') addTask(); | |
| }); | |
| taskList.addEventListener('click', function(e) { | |
| if (e.target.closest('.complete-btn')) { | |
| const index = e.target.closest('.complete-btn').dataset.index; | |
| toggleTask(index); | |
| } else if (e.target.closest('.delete-btn')) { | |
| const index = e.target.closest('.delete-btn').dataset.index; | |
| deleteTask(index); | |
| } | |
| }); | |
| // Initial render | |
| renderTasks(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |