上QQ阅读APP看书，第一时间看更新
Implementing the user interface
Now let's modify the index.html page to add the basic user interface structure; we'll add the behavior later:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoIt</title>
</head>
<body id="todoIt" style="text-align: center">
<h1>TodoIt</h1>
<h2>Add new items</h2>
<p>
What needs to be done?
<input type="text" id="todoInput" title="What should be added to
the todo list?" />
<input type="button" value="Add todo" />
</p>
<h2>Current todo list</h2>
<p>Filter: <input type="text" id="todoFilter" title="Filter for the todo list" /></p>
<div id="todoListContainer">Nothing to do, hurray!</div>
</body>
</html>
Our page contains the following:
- An input box called todoInput, which will be used to describe the new todo item.
- A button to add the new todo item.
- Another input box called todoFilter, which will be used to filter the list of todo items.
- A div called todoListContainer, which is empty for now, but will later contain the (filtered) list of todo items.
Granted, the TodoIt user interface ( UI) is basic, but we'll see how to create much better-looking web applications in later chapters.
Right now, you can't do anything with the page as there's no logic behind it yet. Let's fix that with TypeScript's help.