How to edit tasks?

To add the functionality to edit tasks in your To-Do List application, you can follow these steps:

Step 1: Update the JavaScript Code

You will need to modify the existing JavaScript code to include an edit feature. Here’s how to do it:

1. Add an Edit Button: Each task will have an edit button that allows the user to modify the task text.
2. Update the Task: When the edit button is clicked, the task text will be replaced with an input field to allow editing.

Updated JavaScript Code

Here’s the modified script.js file that includes the edit functionality:

document.getElementById('addTaskButton').addEventListener('click', addTask);
document.addEventListener('DOMContentLoaded', loadTasks); // Load tasks on page load

function addTask() {
    const taskInput = document.getElementById('taskInput');
    const taskText = taskInput.value.trim();

    if (taskText === '') {
        alert('Please enter a task!');
        return;
    }

    const taskList = document.getElementById('taskList');
    const listItem = createTaskElement(taskText);
    taskList.appendChild(listItem);
    taskInput.value = ''; // Clear the input field

    saveTaskToStorage(taskText); // Save to localStorage
}

function createTaskElement(taskText) {
    const listItem = document.createElement('li');
    listItem.textContent = taskText;

    // Add an edit button to each task
    const editButton = document.createElement('button');
    editButton.textContent = 'Edit';
    editButton.style.marginLeft = '10px';
    editButton.addEventListener('click', function() {
        editTask(listItem, taskText);
    });

    // Add a delete button to each task
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.style.marginLeft = '10px';
    deleteButton.addEventListener('click', function() {
        taskList.removeChild(listItem);
        removeTaskFromStorage(taskText); // Remove from localStorage
    });

    listItem.appendChild(editButton);
    listItem.appendChild(deleteButton);
    return listItem;
}

function editTask(listItem, oldTaskText) {
    const input = document.createElement('input');
    input.type = 'text';
    input.value = oldTaskText;

    // Replace the task text with the input field
    listItem.textContent = '';
    listItem.appendChild(input);

    // Create a save button
    const saveButton = document.createElement('button');
    saveButton.textContent = 'Save';
    saveButton.style.marginLeft = '10px';
    saveButton.addEventListener('click', function() {
        const newTaskText = input.value.trim();
        if (newTaskText === '') {
            alert('Please enter a task!');
            return;
        }

        // Update the task in the list and localStorage
        listItem.textContent = newTaskText;
        listItem.appendChild(createEditButton(newTaskText));
        listItem.appendChild(createDeleteButton(newTaskText));
        updateTaskInStorage(oldTaskText, newTaskText); // Update localStorage
    });

    listItem.appendChild(saveButton);
}

function createEditButton(taskText) {
    const editButton = document.createElement('button');
    editButton.textContent = 'Edit';
    editButton.style.marginLeft = '10px';
    editButton.addEventListener('click', function() {
        editTask(listItem, taskText);
    });
    return editButton;
}

function createDeleteButton(taskText) {
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.style.marginLeft = '10px';
    deleteButton.addEventListener('click', function() {
        taskList.removeChild(listItem);
        removeTaskFromStorage(taskText); // Remove from localStorage
    });
    return deleteButton;
}

function saveTaskToStorage(task) {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.push(task);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasks() {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    const taskList = document.getElementById('taskList');

    tasks.forEach(task => {
        const listItem = createTaskElement(task);
        taskList.appendChild(listItem);
    });
}

function removeTaskFromStorage(task) {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks = tasks.filter(t => t !== task); // Filter out the task to remove
    localStorage.setItem('tasks', JSON.stringify(tasks)); // Update localStorage
}

function updateTaskInStorage(oldTask, newTask) {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks = tasks.map(t => (t === oldTask ? newTask : t)); // Update the task
    localStorage.setItem('tasks', JSON.stringify(tasks)); // Update localStorage
}

Explanation of the Code:

1. Edit Button: Each task now has an "Edit" button that, when clicked, replaces the task text with an input field and a "Save" button.

2. Editing Functionality: The editTask function creates an input field pre-filled with the current task text. When the "Save" button is clicked, it updates the task in the displayed list and in localStorage.

3. Updating localStorage: The updateTaskInStorage function updates the task in localStorage by mapping the old task to the new task.

Running the Updated Application:

1. Save the updated script.js file.
2. Open index.html in a web browser.
3. You can now add tasks, edit them, and the changes will be reflected in both the displayed list and localStorage.

This allows users to modify their tasks easily!