script.js

document.addEventListener('DOMContentLoaded', () => {
    const taskInput = document.getElementById('taskInput');
    const addTaskButton = document.getElementById('addTaskButton');
    const taskList = document.getElementById('taskList');
    const emptyMessage = document.querySelector('.empty-message');
    const taskCounter = document.getElementById('taskCounter');
    const clearAllBtn = document.getElementById('clearAllBtn');
    const motivationalMessages = [
        "You're doing great! 🌟",
        "One task at a time! 🚀",
        "Productivity level: Expert! 🏆",
        "Making progress every day! 📈",
        "You've got this! 💪",
        "Small steps lead to big achievements! 🏔️"
    ];
    const motivationalMessage = document.getElementById('motivationalMessage');
    const confettiContainer = document.querySelector('.confetti-container');

    // Load tasks from localStorage
    loadTasks();

    // Update motivational message every 5 seconds
    setInterval(() => {
        const randomMessage = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)];
        motivationalMessage.textContent = randomMessage;
    }, 5000);

    // Update task counter
    function updateTaskCounter() {
        const taskItems = taskList.querySelectorAll('li');
        const totalTasks = taskItems.length;
        const completedTasks = taskList.querySelectorAll('input[type="checkbox"]:checked').length;
        
        if (totalTasks === 0) {
            taskCounter.textContent = '0 tasks';
        } else {
            taskCounter.textContent = `${completedTasks}/${totalTasks} completed`;
        }
    }

    // Toggle empty message visibility
    function toggleEmptyMessage() {
        const taskItems = taskList.querySelectorAll('li');
        emptyMessage.style.display = taskItems.length === 0 ? 'flex' : 'none';
        updateTaskCounter();
    }

    // Save tasks to localStorage
    function saveTasks() {
        const tasks = [];
        taskList.querySelectorAll('li').forEach(li => {
            const checkbox = li.querySelector('input[type="checkbox"]');
            const taskText = li.querySelector('label span:last-child').textContent;
            tasks.push({
                text: taskText,
                completed: checkbox.checked
            });
        });
        localStorage.setItem('tasks', JSON.stringify(tasks));
        updateTaskCounter();
    }

    // Load tasks from localStorage
    function loadTasks() {
        const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        tasks.forEach(task => {
            createTaskElement(task.text, task.completed);
        });
        toggleEmptyMessage();
    }

    // Create task element with animation
    function createTaskElement(taskText, isCompleted = false) {
        const li = document.createElement('li');
        li.className = 'task-item';
        li.innerHTML = `
            <label class="flex items-center">
                <input type="checkbox" ${isCompleted ? 'checked' : ''} />
                <span class="custom-checkbox"></span>
                <span class="ml-3 text-gray-800">${taskText}</span>
            </label>
            <button class="delete-btn" title="Delete task">
                <i data-feather="trash-2" class="w-4 h-4"></i>
            </button>
        `;

        const checkbox = li.querySelector('input[type="checkbox"]');
        checkbox.addEventListener('change', function() {
            if (this.checked) {
                li.classList.add('task-complete-animation');
                setTimeout(() => {
                    li.classList.remove('task-complete-animation');
                }, 500);
                
                // Small chance to trigger confetti
                if (Math.random() > 0.7) {
                    createConfetti();
                }
            }
            saveTasks();
        });

        const deleteBtn = li.querySelector('.delete-btn');
        deleteBtn.addEventListener('click', () => {
            li.style.transform = 'translateX(100%)';
            li.style.opacity = '0';
            setTimeout(() => {
                li.remove();
                saveTasks();
                toggleEmptyMessage();
            }, 300);
        });

        taskList.appendChild(li);
        feather.replace();
        toggleEmptyMessage();
        
        // Add entrance animation
        setTimeout(() => {
            li.style.opacity = '1';
        }, 10);
    }

    // Create confetti effect
    function createConfetti() {
        confettiContainer.classList.remove('hidden');
        confettiContainer.innerHTML = '';
        
        for (let i = 0; i < 50; i++) {
            const confetti = document.createElement('div');
            confetti.className = 'confetti';
            confetti.style.left = `${Math.random() * 100}%`;
            confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
            confetti.style.animationDelay = `${Math.random() * 2}s`;
            confettiContainer.appendChild(confetti);
        }
        
        setTimeout(() => {
            confettiContainer.classList.add('hidden');
        }, 3000);
    }

    // Add new task
    function addTask(event) {
        event.preventDefault();
        const taskText = taskInput.value.trim();
        
        if (!taskText) {
            taskInput.focus();
            return;
        }

        createTaskElement(taskText);
        taskInput.value = '';
        taskInput.focus();
        saveTasks();
        
        // Add slight bounce animation to input
        taskInput.classList.add('animate-bounce');
        setTimeout(() => {
            taskInput.classList.remove('animate-bounce');
        }, 500);
    }

    // Clear all tasks
    clearAllBtn.addEventListener('click', () => {
        if (taskList.children.length === 0) return;
        
        if (confirm('Are you sure you want to clear all tasks?')) {
            taskList.querySelectorAll('li').forEach(li => {
                li.style.transform = 'translateX(-100%)';
                li.style.opacity = '0';
            });
            
            setTimeout(() => {
                taskList.innerHTML = '';
                localStorage.removeItem('tasks');
                toggleEmptyMessage();
            }, 300);
        }
    });

    // Event listeners
    addTaskButton.addEventListener('click', addTask);
    taskInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            addTask(e);
        }
    });

    // Initialize
    toggleEmptyMessage();
    feather.replace();
});