Monkberry Todos

by Anton Medvedev

HTML

<script src="https://cdn.jsdelivr.net/monkberry-standalone/4.0.2/monkberry.min.js"></script>
<script type="text/monkberry" id="Template">
  <ol>
    {% for i, todo of todos %}
      <li>
        <input type="checkbox" checked="{{ todo.complete }}"  data-index="{{ i }}">
        {% if todo.complete %}
          <del>{{ todo.text }}</del>
        {% else %}
          <em>{{ todo.text }}</em>
        {% endif %}
      </li>
    {% endfor %}
  </ol>
  <form>
    <input type="text">
    <button type="submit">Add #{{ todos.length + 1 }}</button>
  </form>
</script>

CSS

body {
  background: #262E3D;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

var state = {
  todos: [
    {text: 'Primum', complete: true},
    {text: 'Secundo', complete: false},
    {text: 'Tertium', complete: false}
  ]
};

var view = Monkberry.render(Template, document.body);
view.update(state);

view.on('submit', 'form', function (event) {
  event.preventDefault();
  var input = view.querySelector('input[type="text"]');

  state.todos.push({text: input.value, complete: false});
  view.update(state);
  
  input.value = '';
});

view.on('click', '[data-index]', function (event) {
  var i = event.target.dataset.index;
  state.todos[i].complete = !state.todos[i].complete;
  view.update(state);
});