const niceList = document.getElementById("nice-list")
const naughtyList = document.getElementById("naughty-list")
const btn = document.getElementById("btn")

const newName = document.getElementById("new-name")
const isGood = document.getElementById("is-good")
const addPerson = document.getElementById("add-person")

let nice = ''
let naughty = ''

const sorteesArr = [
    {
        name: "David",
        hasBeenGood: false
    },
    {
        name: "Del",
        hasBeenGood: true
    },
    {
        name: "Valerie",
        hasBeenGood: false
    },
    {
        name: "Astrid",
        hasBeenGood: true
    }
]

btn.addEventListener("click", function(){
    for(let i=0; i<sorteesArr.length; i++){
        sort(sorteesArr[i])
    }
})

addPerson.addEventListener('click', function(){
    const newPerson = {
        name: newName.value,
        hasBeenGood: isGood.checked
    }
    sorteesArr.push(newPerson)
    sort(newPerson)
    newName.value = ''
    isGood.checked = false
})

function sort(person){
    if(person.hasBeenGood){
        nice += `<li>${person.name}</li>`
    }else{
        naughty += `<li>${person.name}</li>`
    }
    niceList.innerHTML = nice
    naughtyList.innerHTML = naughty
}