JavaScript & jQuery: The Missing Manual, 3rd Edition

Chapter 14. Building a To-Do List Application

jQuery and jQuery UI provide the tools to build a professional-looking web application in just a few steps. jQuery takes care of the details regarding selecting page elements, adding new page elements, and updating the DOM. jQuery UI provides great-looking widgets, interactions, and effects that solve many common problems in user interface design. With both of these libraries working for you, you can skip time-consuming programming tasks and jump directly into coding a dynamic interactive application. This chapter walks you through the construction of a basic task manager.

An Overview of the Application

Your to-do list application will let its users do the following:

• Add a new task to the list of to-dos. You’ll achieve that by adding a jQuery UI button (#1 in Figure 14-1) that, when clicked, opens a jQuery UI dialog box.

• Mark a task as complete. Each to-do list item will have a checkbox to the left of the task name (#2 in Figure 14-1). Clicking this box will automatically remove the to-do list item from the To Be Done list and move it to the Completed Tasks list.

• Drag items from the To Be Done list to the Completed Tasks list and vice versa (#3 in Figure 14-1). While clicking a checkbox works, why limit your users to just one way of marking a task as complete? With jQuery UI’s sortable widget, you can also let users just drag an item to the Completed Tasks list to mark it done. In addition, you can let users drag a completed task ...