git » hoplite.git » master » tree

[master] / todo.mjs 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { input, database, transaction } from './reactives.mjs';
import { h, entities } from './el.mjs';

function todoList() {
  let todos = database([]),
      newTodo = input("");
  return h.div(
    h.h3("TODO"),
    h.input({
      type: "text",
      value: newTodo,
      onchange: ({target: {value}}) => newTodo.set(value)
    }),
    h.input({
      type: "button",
      value: "Add",
      onclick: () => transaction(() => {
        todos.add([
          [todos.maxEid + 1, "text", newTodo.value]
        ]);
        newTodo.set("");
      })
    }),
    h.ul(
      entities(todos, "_eid", "asc", attrs => h.li(attrs.text))
    )
  )
}

document.addEventListener("DOMContentLoaded", () => {
  document.body.appendChild(todoList());
});