scrimba
Note at 1:01
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

AboutCommentsNotes
Note at 1:01
Expand for more info
index.js
run
preview
console
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.
Console
/index.html
LIVE