Step #4

Code the event handler for the delete button so it uses the prompt() method to ask the user for the index number of the task to delete, starting with zero for the first task. Next, sort the tasks to make sure their order matches the order of the displayed tasks. Then use the splice() method of the tasks array to delete the element at the specified index, and call the displayTaskList() function to re-display the task.

Step #7

Add data validation to the delete task event handler so the users entry has to be a number and has to be an index value thats in the array. You can use the length property of the task array for this, but remember that array indexes are zero based, so youll need to subtract 1 from the length value for this to work.

"use strict";

$(document).ready(function(){ var tasks = [];

var displayTaskList = function() { tasks.sort(); $("#task_list").val( tasks.join(" ") ); $("#task").focus(); }; $("#add_task").click(function() { var textbox = $("#task"); var task = textbox.val(); if (task === "") { alert("Please enter a task."); $("#task").focus(); } else { // add new task to tasks array tasks.push( task );

// clear task text box and re-display tasks textbox.val( "" ); displayTaskList(); } }); // STEPS #4, #5 & #7 $("#delete_task").click(function() { }); $("#clear_tasks").click(function() { tasks = []; $("#task_list").val( "" ); $("#task").focus(); }); // set focus on initial load $("#task").focus(); });