UAV

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/uav.min.js"></script>
<div id="app"></div>

CSS

.complete {
    text-decoration: line-through;
}
strong {
    cursor: pointer;
    color: red;
}

JavaScript

const todo = uav.component(`
  <form u-onsubmit="{submit}">
    <h3>Todo List</h3>
    <input type="text" placeholder="Add an item" u-bind="text">
    <button type="submit">Add</button>
    <ul u-for="item,i in items">
        <li>
            <input type="checkbox" u-bind="item.complete"/>
            <span u-class="{item.complete ? 'complete' : ''}">{item.text}</span>
            <strong u-onclick="{remove(i)}">&times;</strong>
        </li>
    </ul>
  </form>
`, {
    // The input's value:
    text: '',
    // The list of todo items:
    items: [],
    // The event handler for new items:
    submit: e => {
        e.preventDefault();
        todo.items.push({
            text: todo.text,
            complete: false
        });
        todo.text = '';
    },
    // Removes an item from the list:
    remove: i => e => todo.items.splice(i, 1)
}, '#app');