Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>To-Do List</title>
</head>
<body>
    <input id="task" placeholder="New Task">
    <button onclick="addTask()">Add</button>
    <ul id="taskList"></ul>    
    <script>
        function addTask() {
            const task = document.getElementById("task").value;
            if (task) {
                const li = document.createElement("li");
                li.textContent = task;
                const removeBtn = document.createElement("button");
                
                removeBtn.textContent = "Remove";
                removeBtn.onclick = () => li.remove();
                li.appendChild(removeBtn);
                li.onclick = () => li.classList.toggle("completed");
                document.getElementById("taskList").appendChild(li);
                document.getElementById("task").value = "";
            }
        }
    </script>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter