HTML and CSS Reference
In-Depth Information
Completing tasks
Next we will implement the “Complete task” functionality. If a task is completed we want to
render the text with a strike through it. This will be achieved with the following class from
tasks.css:
.taskCompleted {
text-decoration: line-through;
}
We also need to store the fact that a task has been completed in the task itself, therefore we
will add a new property to a completed task called
complete
and set this to
true
when it is
completed.
The first step in the process is to change the complete buttons to have a class we can identify,
and make the task
id
accessible to them:
<script id="taskRow" type="text/x-jQuery-tmpl">
<tr>
<td>${task}</td>
<td><time datetime="${requiredBy}"> ${requiredBy}</time></td>
<td>${category}</td>
<td>
<nav>
<a href="#" class="editRow" data-task-id="${id}">Edit</a>
<a href="#" class="completeRow" data-task-id="${id}">Complete</a>
<a href="#" class="deleteRow" data-task-id="${id}">Delete</a>
</nav>
</td>
</tr>
</script>
Next, add a listener to these buttons. This will find the task that needs to be completed, saves
it with a completed property set to
true
, and redraw the table:
$(taskPage).find('#tblTasks tbody').on('click', '.completeRow', function(evt) {
storageEngine.findById('task', $(evt.target).data().taskId, function(task) {
task.complete = true;
storageEngine.save('task', task, function() {
tasksController.loadTasks();
