index.html:

Task List

Task List

Task

task_list.css:

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-color: white; width: 700px; 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: 22em; margin-right: 1em; margin-bottom: 1em; } #tasks { margin-top: 0; float: right; }

task_list.js:

"use strict"; $(document).ready(function() { var tasks = []; // array that will hold the tasks var displayTaskList = function() { tasks.sort(); $("#task_list").val( tasks.join( " " ) ); $("#task").focus(); }; // end displayTaskList()

$("#add_task").click(function() { var textbox = $("#task"); var task = textbox.val(); if (task === "") { alert("Please enter a task."); $("#task").focus(); } else { tasks.push( task ); textbox.val( "" ); displayTaskList(); } }); // end click() $("#clear_tasks").click(function() { tasks = []; $("#task_list").val( "" ); $("#task").focus(); }); // end click()

// set focus on initial load $("#task").focus(); }); // end ready

Short 16-1 Allow multiple task entries in the Task List application In this application, you'll make an enhancement that allows you to enter multiple tasks separated by commas in a single entry. Estimated time: 10 to 20 minutes Here is the enhanced application, with multiple tasks about to be entered Task List Task Finish current project,Get specs for next projec Task List Add Task Clear Tasks And here is the application after the multiple tasks have been entered Task List Task List Finish current project Get specs for next project Task Add Task Clear Tasks 1. Open the HTML and JavaScript files in this folder: exercises short\ch16 task list' 2. Run the application and add two tasks, separated by a comma. Note that the tasks are stored as one task, exactly as you entered it 3. In the JavaScript file, find the handler for the click event of the Add Task button. Then, find the code that adds the task entered by the user to the tasks array. Comment out that code, and replace it with code that works for one or more tasks in an entry To do that, you can use the split0 method of the String object to convert the user's entry into an array. Then, you can use the concat() method of the tasks arrav to add the new tasks to the tasks array