Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TaskFlow - Modern Todo App</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #667eea; | |
| --primary-dark: #5a67d8; | |
| --secondary-color: #48bb78; | |
| --danger-color: #f56565; | |
| --warning-color: #ed8936; | |
| --bg-color: #f7fafc; | |
| --card-bg: #ffffff; | |
| --text-primary: #2d3748; | |
| --text-secondary: #718096; | |
| --border-color: #e2e8f0; | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.12); | |
| --shadow-md: 0 4px 6px rgba(0,0,0,0.1); | |
| --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); | |
| --shadow-xl: 0 20px 25px rgba(0,0,0,0.1); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| } | |
| .background-pattern { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.1; | |
| background-image: | |
| repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px); | |
| pointer-events: none; | |
| } | |
| header { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| padding: 1.5rem 0; | |
| box-shadow: var(--shadow-md); | |
| position: relative; | |
| z-index: 100; | |
| } | |
| .header-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| } | |
| .logo-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.5rem; | |
| } | |
| .header-link { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| transition: var(--transition); | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| } | |
| .header-link:hover { | |
| color: var(--primary-color); | |
| background: rgba(102, 126, 234, 0.1); | |
| } | |
| main { | |
| flex: 1; | |
| padding: 2rem; | |
| max-width: 800px; | |
| width: 100%; | |
| margin: 0 auto; | |
| } | |
| .todo-container { | |
| background: var(--card-bg); | |
| border-radius: 20px; | |
| box-shadow: var(--shadow-xl); | |
| overflow: hidden; | |
| animation: slideUp 0.5s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .todo-header { | |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); | |
| color: white; | |
| padding: 2rem; | |
| } | |
| .todo-title { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .todo-subtitle { | |
| opacity: 0.9; | |
| font-size: 1rem; | |
| } | |
| .stats-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 1rem; | |
| padding: 1.5rem 2rem; | |
| background: var(--bg-color); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .stat-card { | |
| background: white; | |
| padding: 1rem; | |
| border-radius: 12px; | |
| text-align: center; | |
| transition: var(--transition); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .stat-number { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| } | |
| .stat-label { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| margin-top: 0.25rem; | |
| } | |
| .input-section { | |
| padding: 2rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .input-wrapper { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .todo-input { | |
| flex: 1; | |
| padding: 1rem 1.5rem; | |
| border: 2px solid var(--border-color); | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| background: white; | |
| } | |
| .todo-input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); | |
| } | |
| .priority-select { | |
| padding: 1rem; | |
| border: 2px solid var(--border-color); | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| background: white; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .priority-select:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| .add-btn { | |
| padding: 1rem 2rem; | |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); | |
| color: white; | |
| border: none; | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .add-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .add-btn:active { | |
| transform: translateY(0); | |
| } | |
| .filter-tabs { | |
| display: flex; | |
| gap: 0.5rem; | |
| padding: 1rem 2rem; | |
| background: var(--bg-color); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .filter-tab { | |
| padding: 0.75rem 1.5rem; | |
| background: transparent; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .filter-tab:hover { | |
| background: rgba(102, 126, 234, 0.1); | |
| } | |
| .filter-tab.active { | |
| color: var(--primary-color); | |
| background: white; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .filter-tab .count { | |
| display: inline-block; | |
| margin-left: 0.5rem; | |
| padding: 0.125rem 0.5rem; | |
| background: var(--bg-color); | |
| border-radius: 12px; | |
| font-size: 0.75rem; | |
| } | |
| .todo-list { | |
| padding: 1rem; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .todo-list::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .todo-list::-webkit-scrollbar-track { | |
| background: var(--bg-color); | |
| border-radius: 10px; | |
| } | |
| .todo-list::-webkit-scrollbar-thumb { | |
| background: var(--border-color); | |
| border-radius: 10px; | |
| } | |
| .todo-list::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-secondary); | |
| } | |
| .todo-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 1rem; | |
| margin-bottom: 0.5rem; | |
| background: white; | |
| border: 2px solid var(--border-color); | |
| border-radius: 12px; | |
| transition: var(--transition); | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .todo-item:hover { | |
| border-color: var(--primary-color); | |
| box-shadow: var(--shadow-md); | |
| transform: translateX(4px); | |
| } | |
| .todo-item.completed { | |
| opacity: 0.7; | |
| background: var(--bg-color); | |
| } | |
| .todo-item.completed .todo-text { | |
| text-decoration: line-through; | |
| color: var(--text-secondary); | |
| } | |
| .checkbox-wrapper { | |
| position: relative; | |
| margin-right: 1rem; | |
| } | |
| .todo-checkbox { | |
| width: 24px; | |
| height: 24px; | |
| appearance: none; | |
| border: 2px solid var(--border-color); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .todo-checkbox:checked { | |
| background: linear-gradient(135deg, var(--secondary-color), #38a169); | |
| border-color: var(--secondary-color); | |
| } | |
| .todo-checkbox:checked::after { | |
| content: '✓'; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| color: white; | |
| font-size: 14px; | |
| font-weight: bold; | |
| } | |
| .todo-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| } | |
| .todo-text { | |
| font-size: 1rem; | |
| color: var(--text-primary); | |
| word-break: break-word; | |
| } | |
| .todo-meta { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| .priority-badge { | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| } | |
| .priority-high { | |
| background: rgba(245, 101, 101, 0.1); | |
| color: var(--danger-color); | |
| } | |
| .priority-medium { | |
| background: rgba(237, 137, 54, 0.1); | |
| color: var(--warning-color); | |
| } | |
| .priority-low { | |
| background: rgba(72, 187, 120, 0.1); | |
| color: var(--secondary-color); | |
| } | |
| .todo-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .action-btn { | |
| width: 36px; | |
| height: 36px; | |
| border: none; | |
| background: var(--bg-color); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| color: var(--text-secondary); | |
| } | |
| .action-btn:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| transform: scale(1.1); | |
| } | |
| .action-btn.delete:hover { | |
| background: var(--danger-color); | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 3rem; | |
| color: var(--text-secondary); | |
| } | |
| .empty-icon { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| opacity: 0.3; | |
| } | |
| .clear-completed { | |
| padding: 1rem 2rem; | |
| background: var(--danger-color); | |
| color: white; | |
| border: none; | |
| border-radius: 12px; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| margin: 1rem 2rem; | |
| } | |
| .clear-completed:hover { | |
| background: #e53e3e; | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| @media (max-width: 768px) { | |
| .header-content { | |
| padding: 0 1rem; | |
| } | |
| main { | |
| padding: 1rem; | |
| } | |
| .todo-title { | |
| font-size: 1.5rem; | |
| } | |
| .input-wrapper { | |
| flex-direction: column; | |
| } | |
| .stats-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .filter-tabs { | |
| overflow-x: auto; | |
| padding: 1rem; | |
| } | |
| .todo-meta { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 0.5rem; | |
| } | |
| .todo-actions { | |
| flex-direction: column; | |
| } | |
| } | |
| .toast { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| background: white; | |
| padding: 1rem 1.5rem; | |
| border-radius: 12px; | |
| box-shadow: var(--shadow-xl); | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| transform: translateX(400px); | |
| transition: transform 0.3s ease-out; | |
| z-index: 1000; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast-icon { | |
| font-size: 1.5rem; | |
| } | |
| .toast.success .toast-icon { | |
| color: var(--secondary-color); | |
| } | |
| .toast.error .toast-icon { | |
| color: var(--danger-color); | |
| } | |
| .edit-input { | |
| flex: 1; | |
| padding: 0.75rem; | |
| border: 2px solid var(--primary-color); | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| background: white; | |
| } | |
| .edit-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="background-pattern"></div> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <div class="logo-icon">✓</div> | |
| <span>TaskFlow</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="header-link"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="todo-container"> | |
| <div class="todo-header"> | |
| <h1 class="todo-title">My Tasks</h1> | |
| <p class="todo-subtitle">Organize your day, achieve your goals</p> | |
| </div> | |
| <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="activeTasks">0</div> | |
| <div class="stat-label">Active</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="completionRate">0%</div> | |
| <div class="stat-label">Completion Rate</div> | |
| </div> | |
| </div> | |
| <div class="input-section"> | |
| <div class="input-wrapper"> | |
| <input | |
| type="text" | |
| class="todo-input" | |
| id="todoInput" | |
| placeholder="What needs to be done today?" | |
| autocomplete="off" | |
| > | |
| <select class="priority-select" id="prioritySelect"> | |
| <option value="low">Low Priority</option> | |
| <option value="medium" selected>Medium Priority</option> | |
| <option value="high">High Priority</option> | |
| </select> | |
| <button class="add-btn" id="addBtn"> | |
| <span>+</span> | |
| <span>Add Task</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="filter-tabs"> | |
| <button class="filter-tab active" data-filter="all"> | |
| All <span class="count" id="allCount">0</span> | |
| </button> | |
| <button class="filter-tab" data-filter="active"> | |
| Active <span class="count" id="activeCount">0</span> | |
| </button> | |
| <button class="filter-tab" data-filter="completed"> | |
| Completed <span class="count" id="completedCount">0</span> | |
| </button> | |
| </div> | |
| <div class="todo-list" id="todoList"> | |
| <div class="empty-state"> | |
| <div class="empty-icon">📝</div> | |
| <p>No tasks yet. Add your first task above!</p> | |
| </div> | |
| </div> | |
| <button class="clear-completed" id="clearCompleted" style="display: none;"> | |
| Clear Completed Tasks | |
| </button> | |
| </div> | |
| </main> | |
| <div class="toast" id="toast"> | |
| <span class="toast-icon"></span> | |
| <span class="toast-message"></span> | |
| </div> | |
| <script> | |
| class TodoApp { | |
| constructor() { | |
| this.todos = this.loadTodos(); | |
| this.currentFilter = 'all'; | |
| this.init(); | |
| } | |
| init() { | |
| this.setupEventListeners(); | |
| this.render(); | |
| this.updateStats(); | |
| } | |
| setupEventListeners() { | |
| // Add task | |
| document.getElementById('addBtn').addEventListener('click', () => this.addTodo()); | |
| document.getElementById('todoInput').addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') this.addTodo(); | |
| }); | |
| // Filter tabs | |
| document.querySelectorAll('.filter-tab').forEach(tab => { | |
| tab.addEventListener('click', (e) => { | |
| document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active')); | |
| e.target.classList.add('active'); | |
| this.currentFilter = e.target.dataset.filter; | |
| this.render(); | |
| }); | |
| }); | |
| // Clear completed | |
| document.getElementById('clearCompleted').addEventListener('click', () => this.clearCompleted()); | |
| } | |
| generateId() { | |
| return '_' + Math.random().toString(36).substr(2, 9); | |
| } | |
| addTodo() { | |
| const input = document.getElementById('todoInput'); | |
| const priority = document.getElementById('prioritySelect').value; | |
| const text = input.value.trim(); | |
| if (!text) { | |
| this.showToast('Please enter a task', 'error'); | |
| return; | |
| } | |
| const todo = { | |
| id: this.generateId(), | |
| text: text, | |
| completed: false, | |
| priority: priority, | |
| createdAt: new Date().toISOString() | |
| }; | |
| this.todos.unshift(todo); | |
| this.saveTodos(); | |
| this.render(); | |
| this.updateStats(); | |
| input.value = ''; | |
| input.focus(); | |
| this.showToast('Task added successfully!', 'success'); | |
| } | |
| toggleTodo(id) { | |
| const todo = this.todos.find(t => t.id === id); | |
| if (todo) { | |
| todo.completed = !todo.completed; | |
| this.saveTodos(); | |
| this.render(); | |
| this.updateStats(); | |
| } | |
| } | |
| deleteTodo(id) { | |
| this.todos = this.todos.filter(t => t.id !== id); | |
| this.saveTodos(); | |
| this.render(); | |
| this.updateStats(); | |
| this.showToast('Task deleted', 'success'); | |
| } | |
| editTodo(id) { | |
| const todo = this.todos.find(t => t.id === id); | |
| if (!todo) return; | |
| const todoItem = document.querySelector(`[data-id="${id}"]`); | |
| const content = todoItem.querySelector('.todo-content'); | |
| const input = document.createElement('input'); | |
| input.type = 'text'; | |
| input.className = 'edit-input'; | |
| input.value = todo.text; | |
| content.innerHTML = ''; | |
| content.appendChild(input); | |
| input.focus(); | |
| input.select(); | |
| const saveEdit = () => { | |
| const newText = input.value.trim(); | |
| if (newText && newText !== todo.text) { | |
| todo.text = newText; | |
| this.saveTodos(); | |
| this.showToast('Task updated', 'success'); | |
| } | |
| this.render(); | |
| }; | |
| input.addEventListener('blur', saveEdit); | |
| input.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| saveEdit(); | |
| } | |
| }); | |
| } | |
| clearCompleted() { | |
| const completedCount = this.todos.filter(t => t.completed).length; | |
| if (completedCount === 0) return; | |
| this.todos = this.todos.filter(t => !t.completed); | |
| this.saveTodos(); | |
| this.render(); | |
| this.updateStats(); | |
| this.showToast(`Cleared ${completedCount} completed task(s)`, 'success'); | |
| } | |
| getFilteredTodos() { | |
| switch (this.currentFilter) { | |
| case 'active': | |
| return this.todos.filter(t => !t.completed); | |
| case 'completed': | |
| return this.todos.filter(t => t.completed); | |
| default: | |
| return this.todos; | |
| } | |
| } | |
| render() { | |
| const todoList = document.getElementById('todoList'); | |
| const filteredTodos = this.getFilteredTodos(); | |
| if (filteredTodos.length === 0) { | |
| todoList.innerHTML = ` | |
| <div class="empty-state"> | |
| <div class="empty-icon">📝</div> | |
| <p>${this.currentFilter === 'all' ? 'No tasks yet. Add your first task above!' : | |
| this.currentFilter === 'active' ? 'No active tasks!' : | |
| 'No completed tasks!'}</p> | |
| </div> | |
| `; | |
| } else { | |
| todoList.innerHTML = filteredTodos.map(todo => ` | |
| <div class="todo-item ${todo.completed ? 'completed' : ''}" data-id="${todo.id}"> | |
| <div class="checkbox-wrapper"> | |
| <input | |
| type="checkbox" | |
| class="todo-checkbox" | |
| ${todo.completed ? 'checked' : ''} | |
| onchange="app.toggleTodo('${todo.id}')" | |
| > | |
| </div> | |
| <div class="todo-content"> | |
| <div class="todo-text">${this.escapeHtml(todo.text)}</div> | |
| <div class="todo-meta"> | |
| <span class="priority-badge priority-${todo.priority}">${todo.priority}</span> | |
| <span>📅 ${this.formatDate(todo.createdAt)}</span> | |
| </div> | |
| </div> | |
| <div class="todo-actions"> | |
| <button class="action-btn edit" onclick="app.editTodo('${todo.id}')"> | |
| ✏️ | |
| </button> | |
| <button class="action-btn delete" onclick="app.deleteTodo('${todo.id}')"> | |
| 🗑️ | |
| </button> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| // Update filter counts | |
| document.getElementById('allCount').textContent = this.todos.length; | |
| document.getElementById('activeCount').textContent = this.todos.filter(t => !t.completed).length; | |
| document.getElementById('completedCount').textContent = this.todos.filter(t => t.completed).length; | |
| // Show/hide clear button | |
| const clearBtn = document.getElementById('clearCompleted'); | |
| clearBtn.style.display = this.todos.some(t => t.completed) ? 'block' : 'none'; | |
| } | |
| updateStats() { | |
| const total = this.todos.length; | |
| const completed = this.todos.filter(t => t.completed).length; | |
| const active = total - completed; | |
| const rate = total > 0 ? Math.round((completed / total) * 100) : 0; | |
| document.getElementById('totalTasks').textContent = total; | |
| document.getElementById('activeTasks').textContent = active; | |
| document.getElementById('completedTasks').textContent = completed; | |
| document.getElementById('completionRate').textContent = rate + '%'; | |
| } | |
| formatDate(dateString) { | |
| const date = new Date(dateString); | |
| const today = new Date(); | |
| const yesterday = new Date(today); | |
| yesterday.setDate(yesterday.getDate() - 1); | |
| if (date.toDateString() === today.toDateString()) { | |
| return 'Today'; | |
| } else if (date.toDateString() === yesterday.toDateString()) { | |
| return 'Yesterday'; | |
| } else { | |
| return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); | |
| } | |
| } | |
| escapeHtml(text) { | |
| const div = document.createElement('div'); | |
| div.textContent = text; | |
| return div.innerHTML; | |
| } | |
| showToast(message, type = 'success') { | |
| const toast = document.getElementById('toast'); | |
| const icon = toast.querySelector('.toast-icon'); | |
| const msg = toast.querySelector('.toast-message'); | |
| toast.className = `toast ${type}`; | |
| icon.textContent = type === 'success' ? '✓' : '⚠️'; | |
| msg.textContent = message; | |
| toast.classList.add('show'); | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| saveTodos() { | |
| localStorage.setItem('todos', JSON.stringify(this.todos)); | |
| } | |
| loadTodos() { | |
| const stored = localStorage.getItem('todos'); | |
| return stored ? JSON.parse(stored) : []; | |
| } | |
| } | |
| // Initialize the app | |
| const app = new TodoApp(); | |
| </script> | |
| </body> | |
| </html> |