UPDATE: Complete and Edit a Task

The Update operation allows the user to modify a task.

Complete a task

Create the following createDoneButton(li) function to render a button whenever a list item is listed on the <ul> tag

code javascript

function createDoneButton(li){
    const doneBtn = document.createElement("button");
    doneBtn.textContent = "Done";
    doneBtn.style.marginLeft="8px";
    
    doneBtn.onclick = () =>{
        console.log(li);
        li.classList.add("done");
        const buttons = li.querySelectorAll("button");

        buttons.forEach(btn =>{
            btn.disabled=true;
        });

        console.log("Task Completed", li.textContent, Date());
    }

    return doneBtn;
}

Create a button constant to render the done button within the addTaskItem(tasktext) function

code javascript

// Existing Code
function addTaskItem(taskText){
    const li = document.createElement('li');
    const taskSpan = document.createElement('span');
    taskSpan.textContent = taskText;
    li.appendChild(taskSpan);
    
    document.getElementById('taskList').appendChild(li);

    // Call createDoneButton() function
    const doneBtn = createDoneButton(li);
    li.appendChild(doneBtn);
}

Good job! now the task item can be marked as done, whenever a task is marked done the whole list item is disabled including the buttons Now lets add the editBtn button via createEditButton(li,taskSpan) the same logic as the doneBtn by creating a button whenever a list item is rendered

code javascript

function createEditButton(li,taskSpan){
    const editBtn = document.createElement("button");
    editBtn.textContent = "Edit";
    editBtn.style.marginLeft="8px";
    editBtn.onclick = () => handleEditClick(li);
    return editBtn;
}

Now let's add the handleEditClick(li) handler function to display a prompt component to enter the new task item

code javascript

function createEditButton(li,taskSpan){
    const editBtn = document.createElement("button");
    editBtn.textContent = "Edit";
    editBtn.style.marginLeft="8px";
    editBtn.onclick = () => handleEditClick(li);
    return editBtn;
}

The resulting code should look like this

code html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todolist Applicaiton</title>
</head>
<body>

    <h1>Todo List</h1>
    <input type="text"
            id="taskInput"
            placeholder="Add a task"
    /> 
    <button onclick="addTask()">Add Task</button>
    <ul id="taskList">Your tasks go here ...</ul>

<script>
function getTaskText(){
    const input = document.getElementById('taskInput');
    const text = input.value.trim();

    console.log("The input value is: " + input.value);
    return text;
}

function addTask(){
    const taskText = getTaskText();
    addTaskItem(taskText);
}

function addTaskItem(taskText){
    const li = document.createElement('li');
    const taskSpan = document.createElement('span');
    taskSpan.textContent = taskText;
    li.appendChild(taskSpan);
    
    // Call createDoneButton() function
    const doneBtn = createDoneButton(li);
    li.appendChild(doneBtn);

    // Call createEditButton() function
    const editBtn = createEditButton(li,taskSpan);
    li.appendChild(editBtn);

}

function createEditButton(li,taskSpan){
    const editBtn = document.createElement("button");
    editBtn.textContent = "Edit";
    editBtn.style.marginLeft="8px";
    editBtn.onclick = () => handleEditClick(li);
    return editBtn;
}

function handleEditClick(li){
    const currentText = li.firstChild.textContent.trim();
    const newText = prompt("Edit your task", currentText);

    if(newText !==null && newText.trim() !==""){
        li.firstChild.textContent = newText.trim();
        alert("Updated task");
    }else{
        alert("No changes made");
    }

}
</script>

</body>
</html>

Testing Checklist

 text
[ ] Add a task
[ ] Add multiple tasks
[ ] Edit a task
[ ] Mark a task as Done
[ ] Try adding an empty task

format_list_numbered Step 5 of 7

chevron_left Previous Next chevron_right