Delete function for Todo List App (Javascript)

RMAG news

This is my Javascript code for a simple todo app, however my delete function is not working. And the local storage function isn’t working either. Please where did I make an error.

const taskInput = document.getElementById(“taskInput”);
const taskForm = document.getElementById(“taskForm”);
const appContainer = document.querySelector(“.todo-app”);
taskForm.addEventListener(“submit”, function (event) {
event.preventDefault();
});

function addTask() {
if (taskInput.value === “”) {
alert(“Please input a task!”);
} else {
let tasksWrapper = document.createElement(“div”);
tasksWrapper.className = “tasks-wrapper”;

let taskItem = document.createElement(“div”);
taskItem.className = “task-item”;
tasksWrapper.appendChild(taskItem);

let checkboxContainer = document.createElement(“div”);
checkboxContainer.className = “checkbox-container”;
taskItem.appendChild(checkboxContainer);

let checkBox = document.createElement(“input”);
checkBox.type = “checkbox”;
checkBox.onclick = function () {
if (checkBox.checked) {
taskText.classList.add(“checked”);
} else {
taskText.classList.remove(“checked”);
}
};
checkboxContainer.appendChild(checkBox);

let taskText = document.createElement(“span”);
taskText.innerHTML = taskInput.value;
taskItem.appendChild(taskText);

let controlButtons = document.createElement(“div”);
controlButtons.className = “controls”;
taskItem.appendChild(controlButtons);

let editButton = document.createElement(“button”);
editButton.innerHTML = ‘<i class=”fa-regular fa-pen-to-square”></i>’;
editButton.className = “edit-button”;
editButton.onclick = function () {
taskText.contentEditable = true;
// taskText.focus();
};
controlButtons.appendChild(editButton);

taskText.onblur = function () {
taskText.contentEditable = false;
};

let deleteButton = document.createElement(“button”);
deleteButton.innerHTML = ‘<i class=”fa-regular fa-trash-can”></i>’;
deleteButton.className = “delete-button”;
deleteButton.onclick = function () {
taskForm.removeChild(tasksWrapper);
};

controlButtons.appendChild(deleteButton);

appContainer.appendChild(tasksWrapper);
}

taskInput.value = “”;
}

function saveData() {
localStorage.setItem(“data”, tasksWrapper.innerHTML);
}

function showTask() {
tasksWrapper.innerHTML = localStorage.getItem(“data”);
}
saveData();
showTask();

Leave a Reply

Your email address will not be published. Required fields are marked *