PulsePoint

<style>
    .completed {
        text-decoration: line-through;
    }
</style>

<div>
    <form onsubmit="addTodo(event)">
        <input 
            type="text" 
            placeholder="New todo" 
            oninput="setNewTodo(event.target.value)" 
            value="{newTodo}" />
        <button type="submit">Add</button>
    </form>

    <ul>
        <template pp-for="todo in todos">
            <li key="{todo.id}">
                <input 
                    type="checkbox" 
                    checked="{todo.completed}" 
                    onchange="toggleTodo(todo.id, event.target.checked)" />
                <span class="{todo.completed ? 'completed' : ''}">{todo.text}</span>
                <button type="button" onclick="deleteTodo(todo.id)">Delete</button>
            </li>
        </template>
    </ul>
</div>

<script type="text/pp">
    const [newTodo, setNewTodo] = pp.state('');
    const [todos, setTodos] = pp.state([{
        id: 1,
        text: 'Sample task',
        completed: false
    }]);

    function nextId() {
        if (!todos || todos.length === 0) return 1;
        return Math.max(...todos.map(t => t.id)) + 1;
    }

    function addTodo(e) {
        e.preventDefault();

        const text = newTodo.trim();
        if (text === '') return;
        const item = {
            id: nextId(),
            text,
            completed: false
        };
        setTodos([...todos, item]);
        setNewTodo('');
    }

    function toggleTodo(id, checked) {
        setTodos(todos.map(t => (t.id === id ? {
            ...t,
            completed: checked
        } : t)));
    }

    function deleteTodo(id) {
        setTodos(todos.filter(t => t.id !== id));
    }
</script>