HTML and CSS Reference
In-Depth Information
Figure 5.1. The three main views of the My Tasks application: Task List, Add Task, and Settings. To select a view,
the application includes a navigation bar near the top.
Task List displays a list of existing tasks, each with a check box to mark the task as com-
pleted and a Delete button to remove it. Task List also features a search box, which allows
you to filter the task list by description. Add Task contains a form to add a new task to
the database. Settings contains a form to customize the application and to reset all locally
stored data (deleting all Storage data and IndexedDB/Web SQL data). The navigation bar
at the top of the screen lets you easily switch among the three views.
All three views are contained in a single HTML page, and you will use
location
.hash
to switch among them, ensuring the application is highly responsive and fast.
We'll walk you through seven major steps to build the application:
• Step 1: Create the basic structure of the application: the HTML page with the ap-
plication's three views and the JavaScript code to navigate among them.
