let addBtn = document.querySelector('.addBtn');
let inputField = document.querySelector('#input-value');
let saveBtn = document.querySelector('#save-list');
let clearBtn = document.querySelector('#clear-list');
let list = document.querySelector('#list-items');

document.addEventListener("keypress", function(event) {
    if (event.keyCode == 13) {
        addItem();
    }
  });

console.log(localStorage.getItem("todoList"));

if (localStorage.getItem('todoList') == "null") {
    localStorage.setItem('todoList', '');
}

list.innerHTML = localStorage.getItem('todoList');

let removeBtns = document.querySelectorAll('.remove');

for (let i = 0; i < removeBtns.length; i++) {
    removeBtns[i].addEventListener('click', removeItem);
}

let listItems = document.querySelectorAll('#list-items li');

for (let i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', function () {
        listItems[i].classList.toggle('completed');
    });
}

addBtn.addEventListener('click', addItem);

saveBtn.addEventListener('click', save);

clearBtn.addEventListener('click', function () {
    list.innerHTML = "";
});

function save() {
    console.log(localStorage.getItem("todoList"));
    localStorage.setItem("todoList", list.innerHTML);
    console.log(localStorage.getItem("todoList"));
}

function removeItem() {
    this.parentNode.remove();
}

function addItem(){
    if (inputField.value.length > 0) {
        let line = document.createElement('li');
        let paragraph = document.createElement('p');
        paragraph.innerText = inputField.value;
        line.appendChild(paragraph);
        let deleteBtn = document.createElement('div');
        deleteBtn.innerText = "✖";
        deleteBtn.classList.add('remove');
        deleteBtn.addEventListener('click', removeItem);
        line.appendChild(deleteBtn);
        line.addEventListener('click', function () {
            line.classList.toggle('completed');
        });
        document.querySelector('#list-items').appendChild(line);
        inputField.value = "";
    }
}