app.js

let list = document.querySelector(".todo ul");

let ToDo = document.querySelector("#addToDo");
let btnAdd = document.querySelector("#addTask");

btnAdd.addEventListener("click", function() {
    let newTask = document.createElement("li");
    newTask.innerText = ToDo.value;
    list.append(newTask);
    ToDo.value = "";
    let rightSection = document.querySelector(".rightsection");
    let textAlert = document.createElement("p");
    textAlert.innerText = "You've 1 new pending ToDo for the day!";
    textAlert.setAttribute("id","todoAlert");
    rightSection.insertAdjacentElement("beforeend", textAlert);
    setTimeout( function() {
        rightSection.removeChild(textAlert);
    }, 4000);   
});


let removeToDo = document.querySelector("#deleteToDo");
let btnDelete = document.querySelector("#deleteTask");

btnDelete.addEventListener("click", function() {
    let taskText = removeToDo.value.trim();
    removeToDo.value = ""; 
    let taskToRemove = list.querySelector("li");
    while (taskToRemove) {
        if (taskToRemove.innerText === taskText) {
            taskToRemove.setAttribute("id","taskRemove");
            setTimeout( function() {
                list.removeChild(taskToRemove);
            }, 2000);
            
            let rightSection = document.querySelector(".rightsection");
            let textAlert = document.createElement("p");
            textAlert.innerText = `Congrats! You've checklisted ToDo: "${taskText}" for the day!`;
            textAlert.setAttribute("id","todoAlert");
            rightSection.insertAdjacentElement("beforeend", textAlert);
            setTimeout( function() {
                rightSection.removeChild(textAlert);
            }, 4000);
            return;
            }
        taskToRemove = taskToRemove.nextElementSibling;
        }
    alert("Task not found!");
});