In this exercise, you'll develop an application that uses an array to manage a "To Do" list. To keep this simple, assume that you do the tasks on a FIFO basis. That is, the first task added to the list is the first one that you do, so the next task is always the first one in the list.
• Begin with the filestodo_list.js and todo_list.html. Then, run the application to see the user interface shown above, although that interface won't do anything until you develop the JavaScript for it.
• In the JavaScript include a global variable declaration for an empty array named taskList. Then, write the code for adding a task to this array when the user enters a task in the first text box and clicks the Add Task button. This code should also blank out the text box. At this point, don't worry about displaying the tasks in the text area for the task list. Instead, use alert statements to print the array to make sure this works when you add one or more items.
• Add the JavaScript code for the click event handler (function) of the Show Next Task button. This handler should display the first task in the array in the Next task text box and remove its item from the array. To remove the first item in an array, you can use the shift method.
• In the event handler (function) for the Show Next Task button, test to make sure the array has items in it. If it doesn't, use the alert method to display "No tasks remaining" and clear the task from the Next task text box.
• Add a JavaScript function that displays the elements in the array in the Task list text area. Then, call this function from both of the click event handlers (functions) so the updated task list is displayed each time a task is added to the list or removed from it.
• Give this application a final test to make sure it works correctly.