index

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;

}

#message {

color: red;

}

p {

margin: 0;

padding-bottom: .5em;

}

.clear {

clear: both;

}

//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, ""); };

///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

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); };

///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); //displaySortedTaskList(tasks); // 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; };

Add exception handling to the Task Assignment 12-1 Manager app In this exercise, you'll add exception handling to the Task Manager app. It will use the arguments property to make sure the correct number of arguments are passed to a function. When you're done, the Task Manager application will display a custom error message if the correct number of arguments isn't sent (see below) Task Manager Task: The displaySortedTaskList function of the tasklist library requires three arguments Add Task Clear Tasks Open the HTML and JavaScript files in this folder: exercises_shortlch12\task_manager\ In the HTML file, note that there is now a span tag with an id of "message" inside the div tag with an id of "tasks". In the CSS file, note that there is now a rule set for the id "message" that sets its color to red. 2. In the tasklist library file (library_tasklist.js), modify the displaySorted TaskList function so it checks the number of arguments that are passed to it. If three arguments are passed, the function should be done. Otherwise, this function should create and throw an error object with the custom message shown above. In the main JavaScript file, comment out the call to the displaySortedTaskList function. Then, code a new call that only passes the tasks array to the function. Now, run the application and view the custom error message in the Console panel. Put the call to the displaySortedTaskList function inside a try-catch statement. In the catch block of the statement, display the custom error message in the span tag whose id is "message"' Fix the application by undoing what you did in step 3, but keep the corrected call to the displaySortedTaskList function within the try bloclk. 3. 4. 5