To Do List

To Do Lista2docxit 3046 Client Side Web Pr

In this exercise, you will develop a web-based "To Do" list application that employs an array to manage tasks in a FIFO (First-In-First-Out) manner. The core functionalities include adding tasks to the list, displaying the next task to be completed, and maintaining an updated view of all tasks. The application consists of an HTML file for the user interface and a JavaScript file to handle the task management logic.

Project Objectives and Requirements

The primary goal is to build an interactive "To Do" list where tasks are added, viewed, and removed sequentially. You start with two files: todo_list.html for the front-end interface and todo_list.js for scripting. You will declare a global array taskList to store tasks, implement event handlers for adding tasks and showing the next task, and ensure the task list updates dynamically in the interface.

Implementation Details

Initial Setup and JavaScript Variables

Begin by declaring a global variable taskList as an empty array within todo_list.js. This array will serve as the storage for all tasks. Use an organization similar to:

var taskList = [];

This variable will persist throughout the session and will be manipulated via user interactions.

Adding Tasks

Implement a function that captures the task entered in the input box when the "Add Task" button is clicked. It should then append the new task to taskList using push. After adding, clear the input box to prepare for the next entry. To verify that tasks are added correctly, use an alert statement to display the current array contents.

Example:

function addTask() {

var taskInput = $('taskInput');


var task = taskInput.value.trim();


if (task !== "") {


taskList.push(task);


alert("Current task list: " + taskList.join(", "));


taskInput.value = "";


displayTaskList();


}


}

Displaying the Next Task

Develop an event handler for the "Show Next Task" button. When clicked, it should check if taskList contains any items. If so, use shift() to remove and retrieve the first task, then display it in the "Next task" text box. If the list is empty, show an alert with the message "No tasks remaining" and clear the "Next task" text box.

Example:

function showNextTask() {

if (taskList.length > 0) {


var nextTask = taskList.shift();


$('nextTask').value = nextTask;


alert("Remaining tasks: " + taskList.join(", "));


displayTaskList();


} else {


alert("No tasks remaining");


$('nextTask').value = "";


displayTaskList();


}


}

Updating the Task List Display

Create a function to display current tasks in the textarea designated as the task list. This function should set the value of the textarea to a string that joins all tasks separated by new lines or commas for clarity. Call this function at the end of both addTask and showNextTask functions to ensure the interface reflects the latest state of the task array.

Example:

function displayTaskList() {

var taskDisplay = taskList.join("\n");


$('taskListDisplay').value = taskDisplay;


}

Design and Testing

Ensure the interface elements are correctly linked to your script functions, with event listeners attached to buttons. Thoroughly test adding multiple tasks, viewing the next task, and checking the task list updates dynamically. Confirm that the FIFO behavior is maintained, and appropriate alerts notify the user when the list is empty.

Conclusion

This application provides a simple, yet functional demonstration of managing list data structures within a web environment using JavaScript. It reinforces understanding of array operations like push and shift, event-driven programming, DOM manipulation, and user interface updates.

References

  • Flanagan, D. (2011). JavaScript: The Definitive Guide (6th ed.). O'Reilly Media.
  • Resig, J., & Bibeault, B. (2013). Secrets of the JavaScript Ninja. Manning Publications.
  • Duckett, J. (2014). JavaScript and JQuery: Interactive Front-End Web Development. Wiley.
  • W3Schools. (2020). Array shift() Method. Retrieved from https://www.w3schools.com/jsref/jsref_shift.asp
  • MDN Web Docs. (2023). Array.shift() - JavaScript | MDN. Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
  • David Flanagan. (2011). JavaScript: The Definitive Guide. O'Reilly Media.
  • Eric Meyer. (2014). CSS: The Definitive Guide. O'Reilly Media.
  • Google Developer Documentation. (2020). Understanding HTTPS Security. Retrieved from https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https
  • Leventhal, D. (2018). Building an Interactive Web Application with JavaScript. Packt Publishing.
  • García, A. (2019). Full-Stack Web Development with JavaScript and Node.js. Packt Publishing.

Related Assignments