const niceList = document.getElementById("nice-list")
const naughtyList = document.getElementById("naughty-list")
const btn = document.getElementById("btn")
btn.addEventListener("click", function() {
    sort(sorteesArr)
})

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

function sort(obj) {
        for (let i = 0; i < obj.length; i++) {
            let names = document.createElement("div")
            names.className = "obj-names"
            names.append(obj[i].name) //append the names from the obj to the new "names" div(s) 

            if (obj[i].hasBeenGood === false) {
                niceList.append(names) //append new div(s) to the niceList div
            } else if (obj[i].hasBeenGood === true) {
                naughtyList.append(names) //append new div(s) to the niceList div
            }
        }
    }


/** Challenge: 
  - Write the JavaScript to sort the people in sorteesArr into the naughty and nice lists, according to whether they have been good or not. Then display the names in the relevant place in the DOM.
**/

/** Stretch goals:
  - Add the option to add new names to the sorteesArr.
  - Make it possible to switch people to the other list.
**/