const input = document.getElementById("input")
const btn = document.getElementById("btn")
const removeBtn = document.getElementById("removeBtn")
let guestList = document.getElementById("guest-list")
let guests = ["Partner", "Nice Relative 1", "Nice Relative 2", "Evil Relative", "Lonely Neighbour"]
const listItems = document.getElementsByTagName("li")

const renderList = () => {
    guests.forEach(guest => {
        guestList.innerHTML += `<li>${guest}</li>`})
}

const addGuest = () => {
    if(input.value){
        guestList.innerHTML += `<li>${input.value}</li>`
        input.value = ''}
}

const removeGuest = () => {
    listItems.length>0?listItems[listItems.length-1].remove():null
}

const takeOutTheTrash = () => {
    [...listItems].forEach(guest => {
        if(guest.textContent === 'Evil Relative'){
            guest.classList.add("del")
            setTimeout(()=>guest.remove(),1000)}
    })
}

btn.addEventListener("click",addGuest)

removeBtn.addEventListener("click",removeGuest)

evilBtn.addEventListener("click",takeOutTheTrash)

renderList()

// Tasks:
// - Write the JS to render the Christmas day guest list in the guest-list element.
// - Add the functionality to add new guests.
// Stretch goals: 
// - Add a button to remove the most recently added guests.
// - What about if you want to remove the evil relative?