Time for action – adding task details

We will give each task the following new fields:

• Start date: The date the task should start. The input type is date.

• Due date: The date the task should be done by. The input type is date.

• Status: Drop-down list <select> with options for None, Not Started, Started, and Completed.

• Priority: Drop-down list <select> with options for None, Low, Normal, and High.

• % Complete: The input type is number, with a valid range from 0 to 100.

Let's define these fields in the task template markup in taskAtHand.html. The details for each task will be displayed in a section under the task name. Our template now looks like the following code snippet:

<li class="task">
    <span class="task-name"></span>
    <input type="text" class="task-name hidden"/>
    <div class="tools">
        <button class="delete" title="Delete">X</button>
        <button class="move-up" title="Up">^</button>
        <button class...