alicethewhale

let startX = 0;
		let startY = 0;
		const mainTree = document.querySelector(".main-tree");
		function startTinsel(e) {
			if (decSelector.value === "tinsel") {
				startX = e.clientX - 58;
				startY = e.clientY - 82;
			}
		}
		function endTinsel(e) {

alicethewhale

const catButton = document.getElementById("cat-button");
function dropDecs() {
	\\ Take every other decoration on the tree
	Array.from(document.querySelectorAll(".decoration")).filter((dec, index) => index % 2 === 1).forEach(decoration => {
		\\ Set the top value of each one to a random number somewhere around the base of the tree
		decoration.style.top = `${(Math.random()*30)+610}px`;
		\\ Rotate each one up to 90 degrees clockwise or anticlockwise
		decoration.style.transform = `rotate(${(Math.random()*180)-90}deg)`;
	});
}

alicethewhale

const snowButton = document.getElementById('snow-button');
const stopButton = document.getElementById('stop-button');
const snowContainer = document.querySelector('.snow-container');
let snowing = null;

function letItSnow() {
	stopButton.classList.remove("hidden-button");
	snowButton.classList.add("hidden-button");
	function createFlake() {
		let flake = document.createElement('div');

alicethewhale

function twinkle() {
	if (lightsContainer.hasChildNodes()) {
		Array.from(lightsContainer.querySelectorAll('circle')).forEach(light => {
			light.setAttribute('r', `${Math.random()+1}`);
		});
	}
}
setInterval(twinkle, 500);
twinkle();

alicethewhale

const decSelector = document.querySelector('.decorations');
const tree = document.querySelector('.tree-container');
function placeDecoration(e) {
	if (decSelector.value !== "") {
		const decoration = document.createElement('div');
		decoration.textContent = decSelector.value;
		decoration.classList.add('decoration');
		// minus 15 to account for the decorations’ size of 30px
		decoration.setAttribute("style", `top: ${e.clientY}px; left: ${e.clientX - 15}px;`);
		tree.appendChild(decoration);

alicethewhale

const colourPickers = document.querySelectorAll('.colour-picker');
function changeColour() {
	document.documentElement.style.setProperty(`--${this.name}`, this.value);
}
colourPickers.forEach(picker => picker.addEventListener('change', changeColour));

alicethewhale

<circle cx="106" fill="var(--primary-colour)" cy="136" r="16"></circle>
<circle cx="346" fill="var(--secondary-colour)" cy="136" r="16"></circle>
<circle cx="74" fill="var(--secondary-colour)" cy="226" r="16"></circle>
<circle cx="376" fill="var(--primary-colour)" cy="226" r="16"></circle>
<circle cx="46" fill="var(--primary-colour)" cy="331" r="16"></circle>
<circle cx="406" fill="var(--secondary-colour)" cy="331" r="16"></circle>
<circle cx="16" fill="var(--secondary-colour)" cy="451" r="16"></circle>
<circle cx="436" fill="var(--primary-colour)" cy="451" r="16"></circle>

alicethewhale

:root {
	--primary-colour: #ff0000;
	--secondary-colour: #DAA520;
}

alicethewhale

<div class="controls">
	<select name="toppers">
		<option value="⭐">⭐</option>
		<option value="👼">👼</option>
	</select>
</div>
...
<script>
	const topSelector = document.querySelector('select');
	const topper = document.querySelector('.topper');

alicethewhale

<svg width="420px" height="507px" viewBox="0 0 420 507">
    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon id="Triangle" fill="#507E1A" points="210 0 330 120 90 120"></polygon>
        <polygon id="Triangle" fill="#507E1A" points="210 60 360 210 60 210"></polygon>
        <polygon id="Triangle" fill="#507E1A" points="210 135 390 315 30 315"></polygon>
        <polygon id="Triangle" fill="#507E1A" points="210 225 420 435 0 435"></polygon>
        <rect id="Rectangle" fill="#8B572A" x="180" y="435" width="60" height="72"></rect>
    </g>
</svg>