pure web, no build, single HTML page, can copy anywhere, reactive, LOC86 Challenge: try break the program by a specific input.
KISS
finally :: handcrafted minify:
<!doctypehtml> <title>pure web playground</title> <script src=https://cdn.tailwindcss.com></script> <body class=bg-rose-700><main class="grid min-h-screen [perspective:100vw] bg-black place-items-center text-emerald-400"><article class="grid gap-4 duration-1000 ease-in-out outline-1 outline-dashed outline-emerald-300 p-4 transition-all" style=transform:rotateX(90deg)> <section><p>TODO list<span class="text-sky-300 italic text-sm">and more</span><p>instruction:<span class="p-1 bg-sky-700 text-sky-300">-</span>to add a new item<p class=" text-sky-300 italic text-sm text-right">tested by: Chuck Norris before was created</section><pre id=monitor></pre><form action =""><input class="px-4 bg-zinc-800 border-none focus:outline-1 focus:outline-dashed focus:outline-zinc-300 outline-none py-1 text-zinc-300" maxlength=777 name=todo></form><section><button class="p-1 bg-emerald-950 my-2 px-4 rounded" onclick=start()> start</button><button class="p-1 bg-emerald-950 my-2 px-4 rounded" onclick=stop()>stop</button><button class="p-1 my-2 px-4 bg-emerald-950 rounded"onclick="stop(),z.counter=42,rotate (0)">reset</button><button class="p-1 bg-emerald-950 my-2 px-4 rounded"onclick=rotate(90*Math.random()|0)>rotate</button> </section></article></main><script>const signal=(t=(()=>{}))=> e=>new Proxy(e,{get:(t,e)=>t[e],set:(e,o,n)=>(e[o]=n,t(e,o,n), !0)}),elMonitor=document.getElementById("monitor"),monitor=t=> elMonitor.innerText=JSON.stringify(t,null,2);let bum,z=signal( monitor)({pure:"web",counter:42});const stop=()=>clearInterval (bum),start=()=>{clearInterval(bum),bum=setInterval((()=>z. counter++))},textInput=document.querySelector('[name="todo"]') ;textInput.addEventListener( "input",(t=>{z.todo=t.target.value .split("-"),z.length=z.todo.length,rotate(90*Math .random()|0)}));const rotate=t=>setTimeout ((()=>{document.querySelector("article") .style.transform=`rotateX(${t}deg) `}),200);rotate(0)</script> 
Top comments (0)