simple-app.js

// Simple Todo App
class SimpleTodoApp {
    constructor() {
        this.todos = [];
        this.currentPriority = 'low';
        this.currentFilter = 'all';
        this.init();
    }

    init() {
        this.loadTodos();
        this.setupEventListeners();
        this.renderTodos();
        this.updateStats();
    }

    loadTodos() {
        const savedTodos = localStorage.getItem('simple_todos');
        if (savedTodos) {
            try {
                this.todos = JSON.parse(savedTodos);
            } catch (e) {
                console.error('Failed to load todos:', e);
                this.todos = [];
            }
        }
    }

    saveTodos() {
        localStorage.setItem('simple_todos', JSON.stringify(this.todos));
    }

    renderTodos() {
        const todoList = document.getElementById('todo-list');
        const filteredTodos = this.filterTodos();
        
        if (filteredTodos.length === 0) {
            todoList.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-clipboard-list"></i>
                    <h3>No todos yet</h3>
                    <p>${this.currentFilter === 'all' ? 'Add your first todo to get started!' : 'No todos match your filter'}</p>
                </div>
            `;
            return;
        }
        
        todoList.innerHTML = filteredTodos.map(todo => `
            <div class="todo-item ${todo.completed ? 'completed' : ''}" data-id="${todo.id}">
                <div class="todo-checkbox ${todo.completed ? 'checked' : ''}" 
                     onclick="app.toggleTodo('${todo.id}')"></div>
                <div class="todo-content">
                    <div class="todo-title">${this.escapeHtml(todo.title)}</div>
                    <div class="todo-meta">
                        <span class="priority-badge ${todo.priority}">${this.formatPriority(todo.priority)}</span>
                        <span class="todo-date">${this.formatDate(todo.createdAt)}</span>
                    </div>
                </div>
                <div class="todo-actions">
                    <button class="todo-action-btn" onclick="app.editTodo('${todo.id}')" title="Edit">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="todo-action-btn" onclick="app.deleteTodo('${todo.id}')" title="Delete">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        `).join('');
    }

    filterTodos() {
        switch (this.currentFilter) {
            case 'active':
                return this.todos.filter(todo => !todo.completed);
            case 'completed':
                return this.todos.filter(todo => todo.completed);
            default:
                return this.todos;
        }
    }

    addTodo(title) {
        if (!title.trim()) {
            alert('Please enter a todo title');
            return;
        }
        
        const todo = {
            id: Date.now().toString(),
            title: title.trim(),
            completed: false,
            priority: this.currentPriority,
            createdAt: new Date().toISOString(),
            completedAt: null
        };
        
        this.todos.unshift(todo);
        this.saveTodos();
        this.renderTodos();
        this.updateStats();
        
        // Clear input
        document.getElementById('todo-input').value = '';
        
        // Show success message
        this.showMessage('Todo added successfully!');
    }

    toggleTodo(id) {
        const todo = this.todos.find(t => t.id === id);
        if (!todo) return;
        
        todo.completed = !todo.completed;
        todo.completedAt = todo.completed ? new Date().toISOString() : null;
        
        this.saveTodos();
        this.renderTodos();
        this.updateStats();
        
        if (todo.completed) {
            this.showMessage('Todo completed! 🎉');
        }
    }

    editTodo(id) {
        const todo = this.todos.find(t => t.id === id);
        if (!todo) return;
        
        const newTitle = prompt('Edit todo:', todo.title);
        if (newTitle !== null && newTitle.trim() !== '') {
            todo.title = newTitle.trim();
            this.saveTodos();
            this.renderTodos();
            this.showMessage('Todo updated successfully!');
        }
    }

    deleteTodo(id) {
        if (!confirm('Are you sure you want to delete this todo?')) return;
        
        this.todos = this.todos.filter(t => t.id !== id);
        this.saveTodos();
        this.renderTodos();
        this.updateStats();
        this.showMessage('Todo deleted successfully!');
    }

    updateStats() {
        const total = this.todos.length;
        const completed = this.todos.filter(todo => todo.completed).length;
        const progress = total > 0 ? Math.round((completed / total) * 100) : 0;
        
        document.getElementById('total-count').textContent = total;
        document.getElementById('completed-count').textContent = completed;
        document.getElementById('progress-percent').textContent = `${progress}%`;
    }

    setupEventListeners() {
        // Add todo button
        document.getElementById('add-btn').addEventListener('click', () => {
            const input = document.getElementById('todo-input');
            this.addTodo(input.value);
        });
        
        // Enter key in input
        document.getElementById('todo-input').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                this.addTodo(e.target.value);
            }
        });
        
        // Priority buttons
        document.querySelectorAll('.priority-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                document.querySelectorAll('.priority-btn').forEach(b => b.classList.remove('active'));
                e.currentTarget.classList.add('active');
                this.currentPriority = e.currentTarget.dataset.priority;
            });
        });
        
        // Filter buttons
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                e.currentTarget.classList.add('active');
                this.currentFilter = e.currentTarget.dataset.filter;
                this.renderTodos();
            });
        });
        
        // Clear completed
        document.getElementById('clear-completed').addEventListener('click', () => {
            this.clearCompleted();
        });
        
        // Clear all
        document.getElementById('clear-all').addEventListener('click', () => {
            this.clearAll();
        });
    }

    clearCompleted() {
        if (!confirm('Are you sure you want to clear all completed todos?')) return;
        
        this.todos = this.todos.filter(todo => !todo.completed);
        this.saveTodos();
        this.renderTodos();
        this.updateStats();
        this.showMessage('Completed todos cleared!');
    }

    clearAll() {
        if (!confirm('Are you sure you want to clear ALL todos? This cannot be undone.')) return;
        
        this.todos = [];
        this.saveTodos();
        this.renderTodos();
        this.updateStats();
        this.showMessage('All todos cleared!');
    }

    showMessage(message) {
        // Simple alert for now
        console.log(message);
    }

    // Helper methods
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    formatPriority(priority) {
        const priorities = {
            'low': 'Low',
            'medium': 'Medium', 
            'high': 'High'
        };
        return priorities[priority] || priority;
    }

    formatDate(dateString) {
        if (!dateString) return 'Just now';
        
        const date = new Date(dateString);
        const now = new Date();
        const diffMs = now - date;
        const diffMins = Math.floor(diffMs / 60000);
        const diffHours = Math.floor(diffMs / 3600000);
        const diffDays = Math.floor(diffMs / 86400000);
        
        if (diffMins < 1) return 'Just now';
        if (diffMins < 60) return `${diffMins}m ago`;
        if (diffHours < 24) return `${diffHours}h ago`;
        if (diffDays < 7) return `${diffDays}d ago`;
        
        return date.toLocaleDateString('en-US', { 
            month: 'short', 
            day: 'numeric'
        });
    }
}

// Initialize the app when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.app = new SimpleTodoApp();
});