02: HTML Design
Add the designed HTML tags. You will confirm that the design is as same as the mock delivered by the designer.
- Import CSS of todomvc-app-css by CDN.
- Add designed HTML tags into <body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,initial-scale=1"
>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/todomvc-app-css@2.1.2/index.css"
>
<title>TODOs @x-ninja</title>
</head>
<body>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo"
autofocus
autocomplete="off"
placeholder="What needs to be done?"
>
</header>
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<li class="todo">
<div class="view">
<input class="toggle" type="checkbox">
<label>Todo Title (Active)</label>
<button class="destroy"></button>
</div>
<input class="edit">
</li>
<li class="todo completed">
<div class="view">
<input class="toggle" type="checkbox">
<label>Todo Title (Completed)</label>
<button class="destroy"></button>
</div>
<input class="edit">
</li>
<li class="todo editing">
<div class="view">
<input class="toggle" type="checkbox">
<label>Todo Title (Editing)</label>
<button class="destroy"></button>
</div>
<input class="edit">
</li>
</ul>
</section>
<footer class="footer">
<span class="todo-count">
<strong>3</strong> items left
</span>
<ul class="filters">
<li><a href="#/all" class="selected">All</a></li>
<li><a href="#/active">Active</a></li>
<li><a href="#/completed">Completed</a></li>
</ul>
<button class="clear-completed">
Clear completed
</button>
</footer>
</section>
</body>
</html>