const inputs = document.querySelectorAll(".controls input");
const root = document.documentElement
const colorItem = document.getElementById('color')
const color2Item = document.getElementById('color2')
const color3Item = document.getElementById('color3')
// Task:
// Write a function to update the snowman colors according to the colors selected from the pickers.
const renderChange = () => {
    colorItem.addEventListener('change', () => {
        root.style.setProperty('--color', colorItem.value)
    })

    color2Item.addEventListener('change', () => {
        root.style.setProperty('--color2', color2Item.value)
    })

    color3Item.addEventListener('change', () => {
        root.style.setProperty('--color3', color3Item.value)
    })  
}

document.addEventListener('click',renderChange)

// Stretch goals:
// - Add other items eg scarf, arms, etc.
// - Add different options for nose shape, or hats.
// - Check for contrast between pupils and eye color.