superglue.js/examples/todo/todo.html

Simple web application platform using superviews.js and supermodels.js together with browserify

<template name="todos" args="todos">
  <script>

  function add (form) {
    var newTodo = todos.create()
    newTodo.text = form.newTodo.value
    todos.push(newTodo)
    form.newTodo.select()
  }

  function clearCompleted (index) {
    var len = todos.length
    for (var i = len - 1; i >= 0; i--) {
      if (todos[i].completed) {
        todos.splice(i, 1)
      }
    }
  }

  function toggleCompleted (state) {
    todos.forEach(function(todo) {
      todo.completed = state
    })
  }

  function totalCompleted () {
    return todos.filter(function (todo) {
      return todo.completed
    }).length
  }

  </script>

  <table>
    <thead>
      <tr>
        <td></td>
        <td>
          <form onsubmit="{add($element)}">
            <input type="text" name="newTodo" class="form-control" placeholder="Enter new todo">
          </form>
        </td>
        <td><input type="checkbox" onchange="{toggleCompleted(this.checked)}"></td>
      </tr>
    </thead>
    <tbody>
    <tr each="todo, todo.id in todos">
      <td>{$index + 1}.</td>
      <td><input type="text" value="{todo.text}" onkeyup="{todo.text = this.value}" class="form-control"
        style="{ borderColor: todo.text ? '': 'red', textDecoration: todo.completed ? 'line-through': '' }"></td>
      <td><input type="checkbox" checked="{todo.completed}" onchange="{todo.completed = this.checked}"></td>
    <tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Total {todos.length}</td>
        <td colspan="2"><button if="totalCompleted()" onclick="{clearCompleted()}" class="btn btn-sm btn-danger pull-right">Clear completed {totalCompleted()}</button></td>
      </tr>
    </tfoot>
  </table>

</template>