title
A prototype
Draw something with divs
main{ display:flex; flex-wrap:wrap; } .square { background: gray; width:10px; height:10px; } .square.active { background-color: yellow; }
const container = document.querySelector('main'); for (let i = 0; i < 800; i++) { const square = document.createElement("div"); square.className = "square"; container.appendChild(square); } let isMouseDown = false; const squares = document.querySelectorAll(".square"); squares.forEach((square) => { square.addEventListener("mousedown", () => { isMouseDown = true; square.classList.add("active"); }); square.addEventListener("mouseup", () => { isMouseDown = false; }); square.addEventListener("mouseenter", () => { if (isMouseDown) { square.classList.add("active"); } }); }); document.addEventListener("mouseup", () => { isMouseDown = false; });
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