Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<!DOCTYPE html><html><head><style>#l{list-style:none;padding:0}.it{padding:10px;background:#f1f5f9;margin:4px 0;border-radius:6px;cursor:pointer}.it.done{background:#d1fae5;text-decoration:line-through}</style></head><body style="padding:20px;font-family:Arial"><ul id="l"></ul><input id="i" placeholder="New task..." style="padding:8px;width:180px"><button onclick="add()" style="padding:8px 12px;background:#6366f1;color:white;border:none;border-radius:4px;cursor:pointer;margin-left:6px">Add</button><script>const list=document.getElementById("l");["Learn HTML","Learn CSS","Learn JS"].forEach(t=>{const li=document.createElement("li");li.className="it";li.textContent=t;list.appendChild(li);});list.addEventListener("click",e=>{const it=e.target.closest(".it");if(it)it.classList.toggle("done");});function add(){const v=document.getElementById("i").value.trim();if(!v)return;const li=document.createElement("li");li.className="it";li.textContent=v;list.appendChild(li);document.getElementById("i").value="";}</script></body></html>