//REQUIREMENTS
// ✅Build from scratch
// ✅Follow the design spec from Figma
// ✅Can't add empty chore

// Made sure to use:
// ✅-- addEventListener()
// ✅-- innerHTML
// ✅-- Template strings
// 😳-- local Storage -- couldn't make it work properly...

// ISSUES
//😳-- Cannot figure out how to save ALL the items in an array in localStorage (my project only saves the last entered item). I gave up fiddling around with adding an array variable ....and that's also why I have a problem saving all the items in the browser after a refresh...

//😳 -- Weird margin/padding behavior when I use ul/li tags for the chore list / individual chores?? Does it matter that I didn't use ul/li?

//😳 -- Cannot add gap/margin between chores?

const addBtn = document.getElementById("add-btn")
const deleteBtn = document.getElementById("delete-btn")
const choreInput = document.getElementById("chore-input")
const choresListEl = document.getElementById("chores-list-el")


function saveToLocalStorage() {
    localStorage.setItem("textInput", choreInput.value)
}

addBtn.addEventListener("click", function() { 
    saveToLocalStorage()
    if (choreInput.value) {
        choresListEl.innerHTML += `<p class="single-chore">${choreInput.value}</p>`
        choreInput.value = ""
    } 
})

deleteBtn.addEventListener("click", function() {
    choresListEl.innerHTML = ""
    localStorage.clear()
})

//----------------------Just a little extra unrelated stretch goal----------------------
let date = document.getElementById("date")
function displayDate() {
    let currentDate = new Date()
    currentDate = currentDate.toString().split(" ")
    date.innerHTML = `${currentDate[2]} ${currentDate[1]} ${currentDate[3]}`
}
displayDate()