script.js

const textBar = document.querySelector(".text-bar");
const addButton = document.querySelector(".add-button");
const list = document.querySelector(".list");

function addItem(){
    let str = textBar.value.trim();
    if(str === ""){
        return;
    }
    textBar.value = "";

    const listItem = document.createElement("div");
    
    listItem.innerHTML = `
        <div>
            <input type="checkbox" class="checkbox">
            <span>${str}</span>
        </div>
        <span class="del">del</span>
    `;

    listItem.classList.add("list-item");
    list.prepend(listItem);


    const checkBox = listItem.querySelector(".checkbox");
    checkBox.addEventListener("change", checked);

    const del = listItem.querySelector(".del");
   del.addEventListener("click", ()=>{listItem.remove()});
}

function checked(){
    const itemText = this.nextElementSibling;
    itemText.classList.toggle("completed");
}

addButton.addEventListener("click", addItem);
textBar.addEventListener("keydown", (event)=>{
    if(event.key === "Enter"){
        addItem();
    }
});