title
A prototype
Draw something with divs
main{ display:flex; flex-wrap:wrap; font:20px/1em monospace; } .square { background: gray; width:1em; height:1em; } .square.active { background-color: lime; } ::selection{ background:transparent; }
const text = "....wild mint...." let currentLetter = 0 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; injectLetter(square) }); square.addEventListener("mouseup", () => { isMouseDown = false; }); square.addEventListener("mouseenter", () => { if (isMouseDown) { injectLetter(square) } }); }); function injectLetter(square){ square.classList.add("active") square.innerHTML = text[currentLetter] console.log(currentLetter, text.length) if(currentLetter >= text.length - 1){ currentLetter = 0 }else{ currentLetter++ } } 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