const inputs = document.querySelectorAll(".controls input");

const color = document.getElementById("color");
const color2 = document.getElementById("color2");
const color3 = document.getElementById("color3");
    // console.log(color3.value);
    
const pupil = document.querySelectorAll(".pupil");
const nose = document.getElementById("nose");
const button = document.querySelectorAll(".button");

    
color.addEventListener("change", colorEyes);
color2.addEventListener("change", colorButtons);
color3.addEventListener("change", colorNose);

function colorEyes() {
    pupil[0].style.backgroundColor = color.value;
    pupil[1].style.backgroundColor = color.value;
}

function colorNose() {
    nose.style.borderColor = `transparent transparent transparent ${color3.value}`;
}

function colorButtons(){
    button[0].style.backgroundColor = color2.value;
    button[1].style.backgroundColor = color2.value;
    button[2].style.backgroundColor = color2.value;
}

// Task:
// Write a function to update the snowman colors according to the colors selected from the pickers.

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