project for explore

// Core variables const taskInput = document.getElementById('taskInput'); const prioritySelect = document.getElementById('prioritySelect'); const addTaskBtn = document.getElementById('addTaskBtn'); const taskList = document.getElementById('taskList'); const filterStatus = document.getElementById('filterStatus'); const filterPriority = document.getElementById('filterPriority'); // 1. Load tasks from localStorage or initialize an empty array let tasks = JSON.parse(localStorage.getItem('tasks')) || []; // Function to save tasks to localStorage const saveTasks = () => { localStorage.setItem('tasks', JSON.stringify(tasks)); }; // Function to render tasks based on current filters const renderTasks = () => { // Determine filter values const statusFilter = filterStatus.value; const priorityFilter = filterPriority.value; // Apply filtering const filteredTasks = tasks.filter(task => { // Filter by status (completed/pending) const matchesStatus = statusFilter === 'all' || (statusFilter === 'completed' && task.completed) || (statusFilter === 'pending' && !task.completed); // Filter by priority (high/medium/low) const matchesPriority = priorityFilter === 'all' || task.priority === priorityFilter; return matchesStatus && matchesPriority; }); // Generate HTML for filtered tasks taskList.innerHTML = filteredTasks.map(task => ` <li class="task-item ${task.priority} ${task.completed ? 'completed' : ''}" data-id="${task.id}"> <span class="task-text">${task.text}</span> <div class="task-actions"> <button onclick="toggleCompletion(${task.id})"> ${task.completed ? '✅' : '⏳'} </button> <button onclick="deleteTask(${task.id})">🗑️</button> </div> </li> `).join(''); }; // Function to add a new taskrenderTasks();