script.js

// Main app functionality
class TodoApp {
    constructor() {
        this.tasks = JSON.parse(localStorage.getItem('tasks')) || {};
        this.initEventListeners();
    }

    initEventListeners() {
        // Add task form submission
        document.addEventListener('submit', (e) => {
            if (e.target.classList.contains('add-task-form')) {
                e.preventDefault();
                const input = e.target.querySelector('input');
                if (input.value.trim()) {
                    this.addTask(input.value.trim(), e.target.dataset.month);
                    input.value = '';
                }
            }
        });

        // Task completion toggle
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('task-checkbox')) {
                const taskId = e.target.dataset.taskId;
                const month = e.target.dataset.month;
                this.toggleTaskCompletion(taskId, month);
            }
        });
    }

    addTask(text, month) {
        if (!this.tasks[month]) {
            this.tasks[month] = [];
        }
        
        const newTask = {
            id: Date.now().toString(),
            text,
            completed: false,
            createdAt: new Date().toISOString()
        };
        
        this.tasks[month].push(newTask);
        this.saveTasks();
        this.renderTask(newTask, month);
    }

    toggleTaskCompletion(taskId, month) {
        const task = this.tasks[month].find(t => t.id === taskId);
        if (task) {
            task.completed = !task.completed;
            this.saveTasks();
        }
    }

    saveTasks() {
        localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }

    renderTask(task, month) {
        const taskList = document.querySelector(`custom-month-accordion[month="${month}"] .task-list`);
        if (taskList) {
            const taskElement = document.createElement('div');
            taskElement.className = 'task-item flex items-center p-4 border-b border-gray-200';
            taskElement.innerHTML = `
                <div class="flex items-center flex-1">
                    <input type="checkbox" data-task-id="${task.id}" data-month="${month}" 
                           class="task-checkbox w-6 h-6 rounded border-gray-300 text-blue-500 mr-3">
                    <span class="${task.completed ? 'line-through text-gray-400' : 'text-gray-800'}">${task.text}</span>
                </div>
                <button class="delete-task text-gray-400 hover:text-red-500 p-2">
                    <i data-feather="trash-2" class="w-5 h-5"></i>
                </button>
            `;
            taskList.appendChild(taskElement);
            feather.replace();
        }
    }
}

// Initialize the app
document.addEventListener('DOMContentLoaded', () => {
    const app = new TodoApp();
});