title
String to CSS composition
#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') function create() { let c = randomHSL(200, 100, 1.0, 1) let x = document.getElementById("in").value; let lastChar = x.slice(-1) console.log(lastChar,x.length) if(x.length == 1){ console.log('fist') out.setAttribute('style', 'background-color:'+c+'; background-image:') }else{ let style = out.getAttribute('style') out.setAttribute('style', style+',') } style = out.getAttribute('style') if(/[A-Z]/.test(lastChar)){ out.setAttribute('style', style+"linear-gradient(to right, black 50%, transparent 50%)" ) } if(/[0-9]/.test(lastChar)){ out.setAttribute('style', style+"linear-gradient(to bottom, white 0%, transparent 50%)" ) } if(/[a-z]/.test(lastChar)){ out.setAttribute('style', style+"radial-gradient("+c+", transparent)") } if(x == ""){ out.style = "" } } 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