<!-- Predefined "head" template --> <head> <title>Todo List</title> </head> <!-- Predefined "body" template --> <body> <div class="container"> <header> <h1>Todo List</h1> <label class="hide-completed"> <input type="checkbox" checked="{{hideCompleted}}" /> Hide completed tasks </label> <!-- add a form below the h1 --> <form class="new-task"> <input type="text" name="text" placeholder="Type to add new tasks" /> </form> </header> <ul> {{#each tasks}} {{> task}} {{/each}} </ul> </div> </body> <!-- Custom "task" template --> <template name="task"> <li class="{{#if checked}}checked{{/if}}"> <button class="delete">×</button> <input type="checkbox" checked="{{checked}}" class="toggle-checked" /> <span class="text">{{text}}</span> </li> </template>