{"html":"\n\n\n

Task Board

Plan your day, ship your work

\n \n

\n\n","css":":root{--bg:#0f1418;--card:#161c22;--line:#243038;--text:#e6edf3;--muted:#8b98a5;--accent:#3b82f6;--done:#47cf73;}\n*{box-sizing:border-box;}\nbody{margin:0;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;background:linear-gradient(160deg,#0f1418,#13202b);font-family:system-ui,Segoe UI,Roboto,sans-serif;color:var(--text);padding:32px 16px;}\n.app{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.45);}\nheader h1{margin:0;font-size:22px;} .sub{margin:2px 0 18px;color:var(--muted);font-size:13px;}\n.add-row{display:flex;gap:8px;margin-bottom:16px;}\n#task-input{flex:1;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:#0e151b;color:var(--text);font-size:14px;}\n#task-input:focus{outline:none;border-color:var(--accent);}\n.btn{padding:10px 16px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;} .btn:hover{filter:brightness(1.1);}\n.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}\n.item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#0e151b;}\n.item .text{flex:1;font-size:14px;} .item.done .text{text-decoration:line-through;color:var(--muted);} .item.done{border-color:rgba(71,207,115,.4);}\n.toggle{width:18px;height:18px;accent-color:var(--done);cursor:pointer;}\n.del{border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;} .del:hover{color:#ff6b6b;}\n.bar{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);}\n.link{border:0;background:transparent;color:var(--accent);cursor:pointer;font-size:13px;}","js":"(function(){\n \"use strict\";\n var tasks = [\n { id: 1, text: \"Review pull request #42\", done: true },\n { id: 2, text: \"Write integration tests\", done: false },\n { id: 3, text: \"Deploy to staging\", done: false }\n ];\n var nextId = 4;\n var listEl = document.getElementById(\"task-list\");\n var countEl = document.getElementById(\"count\");\n var form = document.getElementById(\"add-form\");\n var input = document.getElementById(\"task-input\");\n function render(){\n listEl.innerHTML = \"\";\n tasks.forEach(function(t){\n var li = document.createElement(\"li\");\n li.className = \"item\" + (t.done ? \" done\" : \"\");\n li.dataset.id = t.id;\n var cb = document.createElement(\"input\"); cb.type=\"checkbox\"; cb.checked=t.done; cb.className=\"toggle\";\n var span = document.createElement(\"span\"); span.className=\"text\"; span.textContent=t.text;\n var del = document.createElement(\"button\"); del.className=\"del\"; del.type=\"button\"; del.textContent=\"x\";\n li.appendChild(cb); li.appendChild(span); li.appendChild(del);\n listEl.appendChild(li);\n });\n var remaining = tasks.filter(function(t){ return !t.done; }).length;\n countEl.textContent = remaining + \" of \" + tasks.length + \" left\";\n console.log(\"[TaskBoard] rendered \" + tasks.length + \" tasks, \" + remaining + \" remaining\");\n }\n form.addEventListener(\"submit\", function(e){\n e.preventDefault();\n var v = input.value.trim(); if(!v) return;\n tasks.push({ id: nextId++, text: v, done: false }); input.value=\"\"; render();\n });\n listEl.addEventListener(\"click\", function(e){\n var li = e.target.closest(\".item\"); if(!li) return; var id = Number(li.dataset.id);\n if(e.target.classList.contains(\"toggle\")){ tasks = tasks.map(function(t){ return t.id===id ? Object.assign({},t,{done:e.target.checked}) : t; }); render(); }\n else if(e.target.classList.contains(\"del\")){ tasks = tasks.filter(function(t){ return t.id!==id; }); render(); }\n });\n document.getElementById(\"clear-done\").addEventListener(\"click\", function(){ tasks = tasks.filter(function(t){ return !t.done; }); render(); });\n render();\n})();"}

index.html

styles.css

script.js

Change View

Console

HTML Preprocessor

Add Class(es) to <html>

Stuff for <head>

CSS Preprocessor

CSS Base

Vendor Prefixing

CSS Framework

Add External Stylesheets

JavaScript Preprocessor

Add External Scripts/Pens

Auto-Updating Preview

Preview Delay

Console Logging

Code Indentation

Indent Size

Font Size

Line Wrapping

Show Line Numbers

Editor Theme