title
A prototype
.square { background: gray; width:10px; height:10px; } .square.red { background-color: red; }
// Get the container element const container = document.body // Create 100 small square divs and append them to the container for (let i = 0; i < 100; i++) { const square = document.createElement("div"); square.className = "square"; container.appendChild(square); } // Add event listeners to change the color on mouse down and scroll const squares = document.querySelectorAll(".square"); squares.forEach((square) => { square.addEventListener("mousedown", () => { square.classList.add("red"); }); square.addEventListener("wheel", (event) => { event.preventDefault(); square.classList.add("red"); }); });
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code