title
String to CSS composition
body{background:blue;} #in, #out{ width:100%; border:1px solid black; margin:0 0 10px 0; } #out{ height:70vh; border:1px solid black; }
let out = document.getElementById('out') let prevLength = 0; let styleArray = []; let spec = /^[!@#\$%\^\&*\"\"\«\»\)\(+=._-]+$/g let space = 0 function create() { let c = randomHSL(200, 100, 1.0, 1) let x = document.getElementById("in").value; let currentStyle = ""; let styleString = ""; let currentLength = x.length; if (currentLength > prevLength) { console.log("+"); let lastChar = x.slice(-1); let matchedAtLeastOne = false if (x.length == 1) { currentStyle = "background-color:" + c + "; background-image:" } if (/[A-Z]/.test(lastChar)) { currentStyle+= "linear-gradient(to right,transparent 0%, black 50%, transparent 50%)"; matchedAtLeastOne = true; } if (/[0-9]/.test(lastChar)) { currentStyle+= "linear-gradient(to bottom, white 0%, transparent 50%)"; matchedAtLeastOne = true; } if (/[a-z]/.test(lastChar)) { currentStyle += "radial-gradient(" + c + ", transparent)"; matchedAtLeastOne = true; } if(spec.test(lastChar)){ currentStyle += "linear-gradient(to bottom, white 0%, transparent 50%)" matchedAtLeastOne = true; } if(lastChar == " " && !space){ var el = addElement() el.style.width = el.style.height = "100%" el.style.background = "repeating-linear-gradient(transparent, #e66465 10px, transparent 15px, transparent 100px)" space = true } if (matchedAtLeastOne) { styleArray.push(currentStyle); } } else { console.log("-"); if (currentLength == 0) { styleArray = []; } else { styleArray.pop(); } } prevLength = currentLength; console.log(styleArray); styleString = styleArray.join(); console.log(styleString); out.setAttribute('style', styleString); } function addElement(){ var el = document.createElement('div') out.appendChild(el) return el } function randomHSL() { return "hsla(" + ~~(360 * Math.random()) + "," + "70%," + "80%,1)" }
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