app.js

let btn = document.querySelector("button");
let ul = document.querySelector("ul");
let inp = document.querySelector("input");

btn.addEventListener("click", function(){
    if (inp.value.trim() === "") return; // Prevent empty tasks

    let item = document.createElement("li");
    item.innerText = inp.value;

    let delBtn = document.createElement("button");
    delBtn.innerText = "delete";
    delBtn.classList.add("delete");

    item.appendChild(delBtn);
    ul.appendChild(item);
    console.log(inp.value);
    inp.value = "";
});

// Use event delegation on the ul container to handle deletes for all tasks
ul.addEventListener("click", function(event){
    if (event.target.nodeName === "BUTTON") {
        let par = event.target.parentElement;
        par.remove();
        console.log("deleted");
    }
});

let input = document.querySelector("input");
input.addEventListener("keypress", function(event){
    if (event.key === "Enter") {
        btn.click();
    }
});