alicethewhale’s gists

alicethewhale / tinsel.js

Created December 14, 2018 11:31

	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 / cat-button.js

Created December 14, 2018 11:29

	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 / let-it-snow.js

Created December 14, 2018 11:28

	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 / twinkly-lights.js

Created December 14, 2018 11:19

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

alicethewhale / decoration-selector.js

Created December 14, 2018 11:17

	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 / colour-picker.js

Created December 14, 2018 11:14

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

alicethewhale / fill-attribute.css

Created December 14, 2018 10:56

	<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 / bauble-colour.css

Created December 14, 2018 10:55

alicethewhale / tree-topper.html

Created December 14, 2018 10:51

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

Created December 14, 2018 10:48

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