const mainList = document.querySelector('.main-list');
const inputItem = document.getElementById('input-item');
const submitButton = document.querySelector('.submit-item');
const removeButton = document.querySelector('.remove-item');

// button function that adds items
submitButton.addEventListener("click", () =>{

    const newNode = document.createElement('li');
    newNode.style.textDecoration = "none";
    newNode.append(inputItem.value);

        //add invisible X button
        const removeX = document.createElement('span');
        removeX.textContent = 'x';
        removeX.classList.add('x-button');
        removeX.style.display = 'none';

        //add event listener that can delete targeted list item
        removeX.addEventListener("click", () =>{
            event.target.parentNode.remove(); 
        });
        newNode.append(removeX);

    mainList.append(newNode);
    inputItem.value = "";
})

//crosses out list items
mainList.addEventListener("click", (event) => {
    let listItemStyle = event.target.style.textDecoration;
    console.log(listItemStyle);
    if(listItemStyle === "line-through"){
        event.target.style.textDecoration = "none";
    }else{
        event.target.style.textDecoration = "line-through";
    }
})

// buttons that lets you remove items

//create const that tells whether X's are visible or not
let xVisability = false;    

// gives remove button the ability to reveal or hide X's
removeButton.addEventListener("click",() =>{
    //grabs all current list items WHEN button is clicked
    const allRemoveX = document.querySelectorAll('.x-button');
    console.log("remove button was clicked");
    //turns X's visibility on or off 
    if(xVisability == false){
        for(const removeX of allRemoveX){
            removeX.style.display = 'inline-block';
        }
        xVisability = true;
        removeButton.textContent = "Exit Remove";

    }else{ // if X's are visible, makes them invislbe
        for(const removeX of allRemoveX){
            removeX.style.display = 'none';
        }
        xVisability = false;
        removeButton.textContent = "Remove";
    }
});