script.js

console.log("task manager");

let taskinput = document.querySelector("#taskinput");
let tasklist = document.querySelector("#tasklist");

//enter key will add the task 
taskinput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        addtask();
    }
});


function addtask() {
    //creating div
    let task = document.createElement("div");

    //empty tasklist
    if (taskinput.value === "") return;

    //task list
    let p = document.createElement("p");
    p.innerText = taskinput.value.trim();

    //btn for deleting task 
    let btn1 = document.createElement("button");
    btn1.innerText = "Delete";

    //btn for marking task as complete
    let btn2 = document.createElement("button");
    btn2.innerText = "Completed";

    //delete btn function 
    btn1.onclick = function () {
        task.remove();
    }

    //mark btn function 
    let mark = false;
    btn2.onclick = function () {
        if (mark === false) {
            p.classList.add("completed");
            mark = true;
            btn2.innerText = "Undo";
        } else {
            p.classList.remove("completed");
            mark = false;
            btn2.innerText = "Completed";
        }
    }

    //double click to edit
    p.ondblclick = function () {
        
        // create input
        let input = document.createElement("input");
        input.value = p.innerText;

        // replace text with input
        p.replaceWith(input);
        input.focus();

        //anywhere click to save
        input.addEventListener("blur", ()=>{
            p.innerText = input.value.trim();
            input.replaceWith(p);
        });
    };

    task.prepend(btn1);
    task.prepend(btn2);
    task.prepend(p);

    tasklist.prepend(task);

    //clear text area 
    taskinput.value = "";

}