script.js

// Arrays to store pending and completed tasks
const pendingTasks = [];
const completedTasks = [];

// Adds a new task to the pending list
function addTask() {
    // Retrieve form values
    const title = document.getElementById('taskTitle').value.trim();
    const description = document.getElementById('taskDescription').value.trim();
    const dueDate = document.getElementById('taskDueDate').value;
    const priority = document.getElementById('taskPriority').value;

    // Ensure all fields are filled
    if (!title || !description || !dueDate) {
        alert('Please fill in all fields');
        return;
    }

    // Create a new task object
    const task = { title, description, dueDate, priority };

    // Add the task to the pending tasks list
    pendingTasks.push(task);

    // Update the task display
    renderTasks();

    // Clear the form for the next input
    clearForm();
}

// Renders tasks based on the selected filter (all, pending, or completed)
function renderTasks(filter = 'all') {
    // Get the containers for pending and completed tasks
    const pendingTasksDiv = document.getElementById('pendingTasks');
    const completedTasksDiv = document.getElementById('completedTasks');

    // Clear the containers before rendering
    pendingTasksDiv.innerHTML = '';
    completedTasksDiv.innerHTML = '';

    // Render pending tasks if filter allows
    if (filter === 'all' || filter === 'pending') {
        pendingTasks.forEach((task, index) => {
            const taskDiv = createTaskElement(task, index, false);
            pendingTasksDiv.appendChild(taskDiv);
        });
    }

    // Render completed tasks if filter allows
    if (filter === 'all' || filter === 'completed') {
        completedTasks.forEach((task, index) => {
            const taskDiv = createTaskElement(task, index, true);
            completedTasksDiv.appendChild(taskDiv);
        });
    }
}

// Creates a task element (HTML) for the task list
function createTaskElement(task, index, isCompleted) {
    const taskDiv = document.createElement('div'); // Create a new task container
    taskDiv.className = `task ${isCompleted ? 'completed' : ''}`; // Add styles for completed tasks

    // Populate task content and action buttons
    taskDiv.innerHTML = `
    <div>
      <strong>${task.title}</strong><br>
      ${task.description}<br>
      <em>Due: ${task.dueDate} | Priority: ${task.priority}</em>
    </div>
    <div>
      ${isCompleted
            ? `<button class="delete" onclick="deleteTask(${index}, true)">Delete</button>`
            : `
            <button class="complete" onclick="markTaskAsComplete(${index})">Complete</button>
            <button class="edit" onclick="editTask(${index})">Edit</button>
            <button class="deleteOne" onclick="deleteTask(${index}, false)">Delete</button>
          `
        }
    </div>
  `;

    return taskDiv;
}

// Marks a pending task as completed
function markTaskAsComplete(index) {
    // Remove the task from pending and add it to completed
    const task = pendingTasks.splice(index, 1)[0];
    completedTasks.push(task);

    // Re-render tasks to reflect the change
    renderTasks();
}

// Deletes a task from either the pending or completed list
function deleteTask(index, isCompleted) {
    if (isCompleted) {
        // Remove the task from completed tasks
        completedTasks.splice(index, 1);
    } else {
        // Remove the task from pending tasks
        pendingTasks.splice(index, 1);
    }

    // Re-render tasks to update the display
    renderTasks();
}

// Edits a pending task by populating its details in the form
function editTask(index) {
    const task = pendingTasks[index];

    // Populate the form fields with the task details
    document.getElementById('taskTitle').value = task.title;
    document.getElementById('taskDescription').value = task.description;
    document.getElementById('taskDueDate').value = task.dueDate;
    document.getElementById('taskPriority').value = task.priority;

    // Remove the task temporarily while it's being edited
    deleteTask(index, false);
}

// Clears the input form
function clearForm() {
    document.getElementById('taskTitle').value = '';
    document.getElementById('taskDescription').value = '';
    document.getElementById('taskDueDate').value = '';
    document.getElementById('taskPriority').value = 'low';
}

// Filters tasks based on the selected filter (all, pending, or completed)
function filterTasks() {
    const filter = document.getElementById('filterTasks').value;
    renderTasks(filter); // Re-render tasks based on the selected filter
}