javascript.js

document.addEventListener('DOMContentLoaded', () => {
    // DOM Elements
    const form = document.getElementById("form");
    const input = document.getElementById("input");
    const todosUL = document.getElementById("todos");
    const countEl = document.getElementById("count");
    const clearBtn = document.getElementById("clear");
    const themeToggle = document.getElementById("theme-toggle");
    const filterBtns = document.querySelectorAll(".filter-btn");
    const priorityBtns = document.querySelectorAll(".priority-btn");
    const searchInput = document.getElementById("search");
    const addBtn = document.getElementById("add-btn");
    const progressBar = document.getElementById("progress");

    // State
    let todos = JSON.parse(localStorage.getItem("todos")) || [];
    let currentFilter = "all";
    let currentPriority = "high";
    let isDarkMode = localStorage.getItem("darkMode") === "true";

    // Initialize theme
    if (isDarkMode) {
        document.body.classList.add("dark-mode");
        themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
    }

    // Render existing todos
    renderTodos();

    // Event Listeners - Both Enter key and plus button
    input.addEventListener("keypress", (e) => {
        if (e.key === "Enter") {
            e.preventDefault(); // Prevent form submission if inside a form
            addTodo();
        }
    });

    addBtn.addEventListener("click", addTodo);

    clearBtn.addEventListener("click", () => {
        todos = todos.filter(todo => !todo.completed);
        renderTodos();
        updateLS();
        updateCount();
        updateProgress();
    });

    themeToggle.addEventListener("click", toggleTheme);

    filterBtns.forEach(btn => {
        btn.addEventListener("click", () => {
            filterBtns.forEach(b => b.classList.remove("active"));
            btn.classList.add("active");
            currentFilter = btn.dataset.filter;
            renderTodos();
        });
    });

    priorityBtns.forEach(btn => {
        btn.addEventListener("click", () => {
            priorityBtns.forEach(b => b.classList.remove("active"));
            btn.classList.add("active");
            currentPriority = btn.dataset.priority;
        });
    });

    searchInput.addEventListener("input", renderTodos);

    // Functions
    function addTodo() {
        const todoText = input.value.trim();
        if (!todoText) return;

        const newTodo = {
            id: Date.now(),
            text: todoText,
            completed: false,
            priority: currentPriority,
            createdAt: new Date().toISOString(),
            dueDate: null
        };

        todos.push(newTodo);
        renderTodos();
        input.value = "";
        updateLS();
        updateCount();
        updateProgress();
    }

    function renderTodos() {
        // Filter todos based on current filter and search
        let filteredTodos = [...todos];
        
        if (currentFilter === "active") {
            filteredTodos = filteredTodos.filter(todo => !todo.completed);
        } else if (currentFilter === "completed") {
            filteredTodos = filteredTodos.filter(todo => todo.completed);
        }
        
        const searchTerm = searchInput.value.toLowerCase();
        if (searchTerm) {
            filteredTodos = filteredTodos.filter(todo => 
                todo.text.toLowerCase().includes(searchTerm)
            );
        }

        // Clear the list
        todosUL.innerHTML = "";

        if (filteredTodos.length === 0) {
            todosUL.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-clipboard-list"></i>
                    <p>No todos found</p>
                </div>
            `;
            return;
        }

        // Add each todo to the list
        filteredTodos.forEach(todo => {
            const todoEl = document.createElement("li");
            todoEl.className = "todo-item";
            if (todo.completed) todoEl.classList.add("completed");

            // Format date for display
            const createdDate = new Date(todo.createdAt);
            const formattedDate = createdDate.toLocaleDateString('en-US', {
                month: 'short',
                day: 'numeric'
            });

            todoEl.innerHTML = `
                <div class="todo-checkbox ${todo.completed ? 'checked' : ''}">
                    <i class="fas fa-check"></i>
                </div>
                <div class="todo-content">
                    <div class="todo-title">${todo.text}</div>
                    <div class="todo-meta">
                        <span class="priority-badge priority-${todo.priority}">
                            ${todo.priority.charAt(0).toUpperCase() + todo.priority.slice(1)}
                        </span>
                        <div class="due-date">
                            <i class="far fa-calendar"></i>
                            <span>${formattedDate}</span>
                        </div>
                    </div>
                </div>
                <button class="delete-btn">
                    <i class="fas fa-trash-alt"></i>
                </button>
            `;

            // Toggle completion
            const checkbox = todoEl.querySelector('.todo-checkbox');
            checkbox.addEventListener('click', () => {
                todo.completed = !todo.completed;
                renderTodos();
                updateLS();
                updateCount();
                updateProgress();
            });

            // Delete todo
            const deleteBtn = todoEl.querySelector('.delete-btn');
            deleteBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                todos = todos.filter(t => t.id !== todo.id);
                renderTodos();
                updateLS();
                updateCount();
                updateProgress();
            });

            // Right click to delete
            todoEl.addEventListener('contextmenu', (e) => {
                e.preventDefault();
                todos = todos.filter(t => t.id !== todo.id);
                renderTodos();
                updateLS();
                updateCount();
                updateProgress();
            });

            todosUL.appendChild(todoEl);
        });
    }

    function updateLS() {
        localStorage.setItem("todos", JSON.stringify(todos));
    }

    function updateCount() {
        const completedCount = todos.filter(todo => todo.completed).length;
        const totalCount = todos.length;
        const itemsLeft = totalCount - completedCount;
        
        countEl.textContent = `${itemsLeft} ${itemsLeft === 1 ? 'item' : 'items'} left`;
    }

    function updateProgress() {
        if (todos.length === 0) {
            progressBar.style.width = "0%";
            return;
        }
        
        const completedCount = todos.filter(todo => todo.completed).length;
        const progress = (completedCount / todos.length) * 100;
        progressBar.style.width = `${progress}%`;
    }

    function toggleTheme() {
        document.body.classList.toggle("dark-mode");
        isDarkMode = document.body.classList.contains("dark-mode");
        localStorage.setItem("darkMode", isDarkMode);
        
        if (isDarkMode) {
            themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        } else {
            themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
        }
    }

    // Initialize
    updateCount();
    updateProgress();
});