The Snowflakes page runs javascript in HTML to recieve and use input from the user.
On the webpage, snowflakes fall from the top. Clicking on the snowflakes makes them bigger, and moving the mouse over the snowflakes makes them spin.
In the HTML, all of the snowflakes are created with class="snowflake". This allows the JavaScript to find all of the elements as an array using
var snowflakes = document.getElementsByClassName("snowflake");
Then, interaction with the snowflakes is once again detected using addEventListener. This time, movement of the mouse changes the snowflake, so mousemove is used.
snowflakes[i].addEventListener("mousedown", enlargeSnowflake);
This runs the function enlargeSnowflake. In it, the style property fontSize for the snowflake changes.
function enlargeSnowflake(evt) {
evt.target.style.fontSize = "60px";
}
The code makes snowflakes that enlarge on click.
As mentioned before, the snowflakes are created with class="snowflake". This allows the JavaScript to find all of the elements as an array using
var snowflakes = document.getElementsByClassName("snowflake");
Then, interaction with the snowflakes can be detected using addEventListener. For clicks, mousedown is used(click is not used to make it more sensitive).
snowflakes[i].addEventListener("mousemove", rotateSnowflake);
This runs the function rotateSnowflake. In it, the style property transform for the snowflake changes.
The variable degrees takes on the current rotation value of the snowflake. It is in the format of rotate(__deg), so degrees.replace and parseInt is used to extract a numerical value. 3 is added to this number to rotate the snowflake more, and evt.target.style.transform is set to the new rotation value.
function rotateSnowflake(evt) {
var degrees = evt.target.style.transform;
degrees = degrees.replace("rotate(", "");
degrees = degrees.replace("deg)", "");
degrees = parseInt(degrees, 10);
degrees += 3;
console.log(degrees);
evt.target.style.transform = "rotate(" + degrees + "deg)";
}
The code makes snowflakes that rotate when the mouse is moved over them.