script.js

// Elements
const addTaskBtn = document.getElementById('addTaskBtn');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
const filterBtns = document.querySelectorAll('.filter-btn');
const clearCompletedBtn = document.getElementById('clearCompletedBtn');

// Modal Elements
const modal = document.getElementById('productModal');
const learnMoreBtn = document.getElementById('learnMoreBtn');
const closeBtn = document.querySelector('.close-btn');

let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
let currentFilter = 'all';

// Render Tasks Function
function renderTasks() {
    taskList.innerHTML = '';
    tasks.forEach((task, index) => {
        if (currentFilter === 'active' && task.completed) return;
        if (currentFilter === 'completed' && !task.completed) return;

        const li = document.createElement('li');
        li.className = task.completed ? 'completed' : '';
        li.innerHTML = `
            <span class="task-text" onclick="toggleTask(${index})">${task.text}</span>
            <button class="delete-btn" onclick="deleteTask(${index})">Delete</button>
        `;
        taskList.appendChild(li);
    });
}

// Add Task
function addTask() {
    const text = taskInput.value.trim();
    if (text !== '') {
        tasks.push({ text, completed: false });
        taskInput.value = '';
        updateStorage();
    }
}

// Delete Task
function deleteTask(index) {
    tasks.splice(index, 1);
    updateStorage();
}

// Toggle Completed
function toggleTask(index) {
    tasks[index].completed = !tasks[index].completed;
    updateStorage();
}

// Clear Completed Tasks
function clearCompleted() {
    tasks = tasks.filter(task => !task.completed);
    updateStorage();
}

// Update Local Storage and Render
function updateStorage() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
    renderTasks();
}

// Filter Change
filterBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        currentFilter = btn.getAttribute('data-filter');
        document.querySelector('.filter-btn.active')?.classList.remove('active');
        btn.classList.add('active');
        renderTasks();
    });
});

// Add Task Button Event
addTaskBtn.addEventListener('click', addTask);

// Enter Key Adds Task
taskInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') addTask();
});

// Clear Completed Tasks Event
clearCompletedBtn.addEventListener('click', clearCompleted);

// Modal Open/Close Events
learnMoreBtn.onclick = () => modal.style.display = 'block';
closeBtn.onclick = () => modal.style.display = 'none';
window.onclick = (e) => { if (e.target === modal) modal.style.display = 'none'; };

// Initial Render
renderTasks();