Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Develop a To Do List application (5 points) : In this exercise, youll develop an application that uses an array to manage a To Do

Develop a To Do List application (5 points):

In this exercise, youll 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.

image text in transcribed

  1. Open the HTML and JavaScript files attached as starter files (index.html and todo_list.js). Then, run the application to see the user interface shown above, although that interface wont do anything until you develop the JavaScript for it.
  2. In the JavaScript file, youll see some starting code, including a variable declaration for an 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, dont worry about displaying the tasks in the text area for the task list. Instead, use alert statements to make sure this works when you add one or more items.
  3. Add the JavaScript code for the click event handler 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 element from the array.
  4. In the event handler for the Show Next Task button, test to make sure the array has elements in it. If it doesnt, use the alert method to display No tasks remaining and clear the task from the Next task text box.
  5. 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 so the updated task list is displayed each time a task is added to the list or removed from it.
  6. Give this application a final test to make sure it works correctly.

Here are the starter files:

JavaScript:

var taskList = []; var $ = function (id) { return document.getElementById(id); } window.onload = function () { }

HTML:

To Do List

To Do List

To Do List Add task Add Task Task list: Wash car Do laundry Clean kitchen Next task Do jQuery homework Show Next Task

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Database Design Application Development And Administration

Authors: Michael V. Mannino

3rd Edition

0071107010, 978-0071107013

More Books

Students also viewed these Databases questions

Question

Networking is a two-way street. Discuss this statement.

Answered: 1 week ago