scrimba
Note at 1:24
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

Note at 1:24
AboutCommentsNotes
Note at 1:24
Expand for more info
index.js
run
preview
console
const house = document.getElementById("house")
const decorator = document.getElementById("decorator")
decorator.addEventListener("click", deckTheHalls)

function deckTheHalls() {
// Task:
// Write a function to add decorations (e.g. ☃️, 🎄, etc) next to the house when the switch is toggled.
if(decorator.checked){
const treeLeft = document.createElement('span');
const treeRight = document.createElement('span');
const mushroomLeft = document.createElement('span');
const mushroomRight = document.createElement('span');
treeLeft.innerHTML = '🌴';
treeRight.innerHTML = '🌴';
mushroomLeft.innerHTML = '🍄';
mushroomRight.innerHTML = '🍄';
house.insertBefore(treeLeft, house.childNodes[0]);
house.insertBefore(treeRight, null);
house.insertBefore(mushroomLeft, house.childNodes[0]);
house.insertBefore(mushroomRight, null);
}else{
house.innerHTML = '🏡';
}
}

// Stretch goals:
// - Make sure that the house & decorations all stay on one line, even if there are a lot of decorations.
// - Allow the user to select different decorations.
Console
/index.html
LIVE