let choresArray = [];
const choresFromLocalStorage = JSON.parse(localStorage.getItem("chores"));

if (choresFromLocalStorage === undefined) {
  choresArray = [];
} else {
  choresArray = choresFromLocalStorage;
}

const inputEl = document.querySelector("#input");
const addBtn = document.querySelector("#add-btn");
const deleteBtn = document.querySelector("#delete-btn");
const ulEl = document.querySelector("#ul-el");

addBtn.addEventListener("click", function () {  
  if (inputEl.value !== "") {
    choresArray.push(inputEl.value);
    localStorage.setItem("chores", JSON.stringify(choresArray));
    choresArray = [...new Set(choresArray)];

    ulEl.innerText = inputEl.value;

    ulEl.style.display = "block";
  }

  inputEl.value = "";
  renderChoreListItems();
});

deleteBtn.addEventListener("click", function () {
  ulEl.style.display = "none";
  // clears the ul-el
  choresArray = [];
  localStorage.clear();
});

function renderChoreListItems() {
  let choresListItems = "";

  for (let i = 0; i < choresArray.length; i++) {
    choresListItems += `<li class="ul-el center br-10 ff-inter"> ${choresArray[i]} </li>`;
  }

  ulEl.innerHTML = choresListItems;
}