1. Open the HTML and JavaScript files in this folder: exercises_short\ch10\task_manager\ Run the application and, if necessary, add a task or two.4

2. In the main JavaScript file (task_list.js), find the code in the displayTaskList function that calls the displaySortedTaskList function and passes it three arguments. Comment out this code and replace it with a call to the displaySortedTaskList function that passes only one argument, the tasks array.

3. Test the application and note that the tasks no longer display. Then, open the Console panel and view the error message (shown above). Click on the link to see what statement caused the error.

4. In the task list library file (library_tasklist.js), add code to the displaySortedTaskList function that checks to make sure three arguments have been passed to it before it runs the rest of the code. If three arguments arent passed, display an alert dialog box with this error message: The displaySortedTaskList function requires 3 parameters.

HTML:

Task Manager

Task:

CSS:

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 100%;

background-color: white;

width: 725px;

margin: 0 auto;

border: 3px solid blue;

padding: 0 2em 1em;

}

h1 {

font-size: 150%;

color: blue;

margin-bottom: .5em;

}

label {

float: left;

width: 8em;

}

input {

width: 20em;

margin-right: 1em;

margin-bottom: 1em;

}

#tasks {

float: right;

width: 25em;

margin: 0 0 .5em;

padding: 1em;

border: 2px solid black;

}

#tasks a {

margin-right: 0.5em;

}

p {

margin: 0;

padding-bottom: .5em;

}

.clear {

clear: both;

}

task_list.js

"use strict"; var $ = function(id) { return document.getElementById(id); }; var tasks = [];

var displayTaskList = function() { // get tasks from storage if (tasks.length === 0) { tasks = getStorage("tasks_10"); } // display sorted tasks with delete links displaySortedTaskList(tasks, $("tasks"), deleteFromTaskList);

// set focus on task text box $("task").focus(); };

var addToTaskList = function() { var task = $("task"); if (task.value === "") { alert("Please enter a task."); } else { tasks.push(capitalizeTask(task.value)); setStorage("tasks_10", tasks);

task.value = ""; displayTaskList(); } };

var deleteFromTaskList = function() { deleteTask(tasks, this.id); // 'this' = clicked link setStorage("tasks_10", tasks); displayTaskList(); };

var clearTaskList = function() { tasks.length = 0; clearStorage("tasks_10"); $("tasks").innerHTML = ""; $("task").focus(); };

window.onload = function() { displayTaskList(); $("add_task").onclick = addToTaskList; $("clear_tasks").onclick = clearTaskList; };

library_tasklist.js

"use strict"; var sortTaskList = function(tasks) { var isArray = Array.isArray(tasks);

if (isArray) { tasks.sort(); } return isArray; };

var displaySortedTaskList = function(tasks, div, handler) {

var html = ""; var isArray = sortTaskList(tasks);

if (isArray) {

//create and load html string from sorted array

for (var i in tasks) {

html = html.concat("

");

html = html.concat("Delete");

html = html.concat(tasks[i]);

html = html.concat("

"); } div.innerHTML = html; // get links, loop and add onclick event handler

var links = div.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) {

links[i].onclick = handler; } } };

var deleteTask = function(tasks, i) {

var isArray = sortTaskList(tasks); if (isArray) { tasks.splice(i, 1); } };

var capitalizeTask = function(task) { var first = task.substring(0,1); return first.toUpperCase() + task.substring(1); };

library_storage.js

"use strict";

var getStorage = function(key) { //get string from storage or an empty string if nothing in storage

var storage = localStorage.getItem(key) || "";

if (storage === "") { return []; } else { return storage.split("|"); } };

var setStorage = function(key, arr) {

if (Array.isArray(arr)) { var storageString = arr.join("|"); localStorage.setItem(key, storageString); } };

var clearStorage = function(key) { localStorage.setItem(key, ""); };