Skip to content

Instantly share code, notes, and snippets.

@alicethewhale

alicethewhale/let-it-snow.js

Created December 14, 2018 11:28
Show Gist options
  • Save alicethewhale/3126174f461f01033961707874fc155e to your computer and use it in GitHub Desktop.
Save alicethewhale/3126174f461f01033961707874fc155e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
let-it-snow.js
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');
flake.classList.add('snowflake');
\\ Start off at the top of the window...
flake.style.top = '0px';
\\ Start off at a random distance across the width of the window...
flake.style.left = `${Math.random() * window.innerWidth}px`;
snowContainer.appendChild(flake);
function snowfall() {
\\ Get the *number* of pixels from the top (take 'px' off the end)...
let topValue = parseInt(flake.style.top.slice(0, flake.style.top.length-2), 10);
\\ Add another pixel to the top if less than the height of the tree...
if (topValue < 650) {
flake.style.top = `${topValue + 1}px`;
} else {
\\ Otherwise, remove element from DOM
flake.remove();
}
}
setInterval(snowfall, (Math.random() * 100) + 10);
snowfall();
}
snowing = setInterval(createFlake, 2000);
}
function stopSnow() {
snowButton.classList.remove("hidden-button");
stopButton.classList.add("hidden-button");
clearInterval(snowing);
}
snowButton.addEventListener('click', letItSnow);
stopButton.addEventListener('click', stopSnow);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment