simple-todos.html 865 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <!-- Predefined "head" template -->
  2. <head>
  3. <title>Todo List</title>
  4. </head>
  5. <!-- Predefined "body" template -->
  6. <body>
  7. <div class="container">
  8. <header>
  9. <h1>Todo List ({{incompleteCount}})</h1>
  10. <label class="hide-completed">
  11. <input type="checkbox" checked="{{hideCompleted}}" />
  12. Hide completed tasks
  13. </label>
  14. <!-- add a form below the h1 -->
  15. <form class="new-task">
  16. <input type="text" name="text" placeholder="Type to add new tasks" />
  17. </form>
  18. </header>
  19. <ul>
  20. {{#each tasks}}
  21. {{> task}}
  22. {{/each}}
  23. </ul>
  24. </div>
  25. </body>
  26. <!-- Custom "task" template -->
  27. <template name="task">
  28. <li class="{{#if checked}}checked{{/if}}">
  29. <button class="delete">&times;</button>
  30. <input type="checkbox" checked="{{checked}}" class="toggle-checked" />
  31. <span class="text">{{text}}</span>
  32. </li>
  33. </template>