Skip to main content

To Do List

Problem Statement​

Create a program that allows the user to add, remove, and edit tasks. The program should have a simple user interface that includes an input field for the task, a button to add the task, edit buttons for each task, and delete buttons for each task. When the user clicks the add button, the program should add the task to the list. When the user clicks the edit button, the program should allow the user to edit the task. When the user clicks the delete button, the program should remove the task from the list. There should be a button to clear all tasks from the list.

img_1.png

Acceptance Criteria​

  • The program should have an HTML file with the required user interface elements (input field, buttons) styled with CSS.
  • The program should have a JavaScript function for adding a task to the list.
  • The program should have a JavaScript function for editing a task.
  • The program should have a JavaScript function for deleting a task.
  • When the user clicks the add button, the program should add the task to the list.
  • When the user clicks the edit button, the program should allow the user to edit the task.
  • When the user clicks the delete button, the program should remove the task from the list.
  • Task should have a checkbox that allows the user to mark the task as completed.
  • The program should have a JavaScript function for clearing all tasks from the list.
  • When the user clicks the clear button, the program should remove all tasks from the list.
  • The program should handle any errors (e.g., submitting an empty task) gracefully and display an error message to the user.

Bonus​

  • The program should have a JavaScript function for saving the tasks to local storage.
  • When the user refreshes the page, the program should load the tasks from local storage.

Hints​

Local storage is a way to store data in the browser. i.e. if you refresh the page, the data will still be there.

// Save data to local storage

localStorage.setItem("key", "value");

// Get data from local storage

localStorage.getItem("key");

// Remove data from local storage

localStorage.removeItem("key");