index.hbs in Serialized Todo example

index.hbs

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://wzrd.in/standalone/uuid%2Fv4@latest"></script>

<h1>TODO-LISTS</h1>

<form id="create-list-form">
  <input id="list-name" type="text" />
  <button type="submit" id="create-todo">Create new list</button> <span id="status"></span>
</form>

<ul id="todo-lists">
  {{#each lists}}
  <li><a href="/lists/{{listId}}">{{name}}</a></li>
  {{/each}}
</ul>

<div>
  <h3>Stats</h3>
  <div>Lists: <span id="listCount"></span></div>
  <div>Todos: <span id="todoCount"></span></div>
  <div>Completed todos: <span id="completedTodoCount"></span></div>
  <div id="stats-status"></div>
</div>

<script>
  $('#stats-status').text('Loading...')

  $.getJSON('/lists/stats', function (data) {
    $('#todoCount').text(data.todoCount)
    $('#listCount').text(data.listCount)
    $('#completedTodoCount').text(data.completedTodoCount)
    $('#stats-status').fadeOut(500)
  });

  $('#create-list-form').submit(function (e) {
    e.preventDefault();
    var listId = uuidv4();
    var listName = $('#list-name').val();
    $('#status').html('Saving...');
    $('#list-name').val('');
    $("#todo-lists").prepend('<li><a href=\"/lists/' + listId + '">' + listName + '</a></li>');
    $.ajax('/lists/create-list', {
      type: 'POST',
      contentType: "application/json; charset=utf-8",
      data: JSON.stringify({ listId: listId, name: listName })
    }).done(function (response) {
      $('#status').fadeOut(1500)
    }).fail(function () {
      console.log('error')
    });
  });

</script>