HTML and CSS Reference
In-Depth Information
Updating the Count
We need to update the count at the bottom of the screen every time there is a change to the
number of tasks:
In order to do this, we will change this element:
<footer>You have 3 tasks</footer>
to this:
<footer>You have <span id="taskCount"></span> tasks</footer>
Wrapping the number in a span will not alter the presentation, but it allows us to find the
element in the DOM, and update it when required.
Now we want to add a function to the tasks-controller.js that counts the number of rows in
the table and updates the element appropriately:
tasksController = function() {
function errorLogger(errorCode, errorMessage) {
console.log(errorCode +':'+ errorMessage);
}
var taskPage;
var initialised = false;
function taskCountChanged() {
var count = $(taskPage).find( '#tblTasks tbody tr').length;
$('footer').find('#taskCount').text(count);
}
Finally, we want to call this function in the
loadTasks
method:
loadTasks : function() {
storageEngine.findAll('task', function(tasks) {
$.each(tasks, function(index, task) {
