Commit c7f5709c authored by Sindre Sorhus's avatar Sindre Sorhus

Wrap the todo list in a `<section>` element and move the `Mark all as complete` checkbox into it.

parent ad4887ea
......@@ -10,34 +10,36 @@
<header>
<h1>Todos</h1>
<input type="text" placeholder="What needs to be done?">
</header>
<section>
<!-- toggle-all-container is hidden by default and should be shown when there are todos, and hidden when not -->
<div id="toggle-all-container">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
</div>
</header>
<ul class="items">
<li class="item done">
<div class="view" title="Double click to edit...">
<input class="toggle" type="checkbox" checked>
<span>Create a TodoMVC template</span>
<a class="destroy"></a>
</div>
<div class="edit">
<input type="text" value="Create a TodoMVC template">
</div>
</li>
<li class="item">
<div class="view" title="Double click to edit...">
<input class="toggle" type="checkbox">
<span>Rule the web</span>
<a class="destroy"></a>
</div>
<div class="edit">
<input type="text" value="Rule the web">
</div>
</li>
</ul>
<ul class="items">
<li class="item done">
<div class="view" title="Double click to edit...">
<input class="toggle" type="checkbox" checked>
<span>Create a TodoMVC template</span>
<a class="destroy"></a>
</div>
<div class="edit">
<input type="text" value="Create a TodoMVC template">
</div>
</li>
<li class="item">
<div class="view" title="Double click to edit...">
<input class="toggle" type="checkbox">
<span>Rule the web</span>
<a class="destroy"></a>
</div>
<div class="edit">
<input type="text" value="Rule the web">
</div>
</li>
</ul>
</section>
<!-- this footer needs to be shown with JS when there are todos and hidden when not -->
<footer>
<a class="clear">Clear completed</a>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment