let data = {
    todo: []

}
console.log(data.todo);

//Lägg till en delete-knapp efter varje item
function addDeleteButton() {
    let listItems = document.getElementsByTagName("LI");
    for (let i = 0; i < listItems.length; i++) {
        let span = document.createElement("SPAN");
        let deleteX = document.createTextNode("\u00D7");
        span.className = "close-button"; //Lägg till en class på span-elementet. I HTML ser det ut såhär: <span class="close"></span>
        span.appendChild(deleteX); //Lägg till texten (krysset) i span-elementet
        listItems[i].appendChild(span); //Lägg till span-elementet till varje listItem
    }
}

//Event handler på delete-knappen
function deleteButtonActivation() {
    let close = document.getElementsByClassName("close-button");
    for (let i = 0; i < close.length; i++) {
            close[i].onclick = function () { //Lägger på en evenhandler på close-knappen
                let listItem = this.parentElement; //this är "den vi är på just nu enligt index", parentElement är ju den li-elementet som innehåller den to-don du vill ta bort. Eftersom det är det krysset du klickar på
                listItem.style.display = "none";
                data.todo.splice(i, 1);
                console.log(data.todo);

            }

    }
}

//Lägg till en "checked"-symbol när man klickar på en todo
let list = document.querySelector("ul");
list.addEventListener("click", (event) => {
    if (event.target.tagName === "LI") {
        event.target.classList.toggle("checked");
    }
}, false) //vadan detta?


//Skapar en ny to-do när man fyller i input-fältet
function createNewListItem() {
    let li = document.createElement("li");
    let inputValue = document.getElementById("input-todo").value; //Hämtar värdet ur input-fältet, alltså det man skrivit in
    let insertion = document.createTextNode(inputValue);
    li.appendChild(insertion);

    if (inputValue === "") {
        alert("You must write something!");
    } else {
        document.getElementById("todolist").appendChild(li);
        document.getElementById("the-form").reset();
    }

    addDeleteButton();
    deleteButtonActivation();
    data.todo.push(inputValue);
    console.log(data.todo);

}

//Funktionsanrop
addDeleteButton();
deleteButtonActivation();