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)