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.