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.
const house = document.getElementById("house")
const decorator = document.getElementById("decorator")