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

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

btn.addEventListener("click", ()=>{  
    const niceChild = sorteesArr.filter(child => {
        return child.hasBeenGood === true;
    }).map(child =>{
        return `<li>${child.name}</li>`
    }).join('');

    const naughtyChild = sorteesArr.filter(child => {
        return child.hasBeenGood === false;
    }).map(child => {
        return `<li>${child.name}</li>`
    }).join('');

    niceList.innerHTML = niceChild;
    naughtyList.innerHTML = naughtyChild;
});

// Step 1:  Filter
// Step 2: Map
// Step 3: Remove ,

/** 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.
**/