## [TASK MANAGEMENT APP](https://arindal1.github.io/To-Do-List-WebApp/)

## Activity 1: Setting Up the Project

### Task 1: Initialize a new project directory and set up the basic HTML structure for the task management app.
- Create a new project directory.
- Set up an `index.html` file with the basic structure for the task management app.

### Task 2: Add a basic CSS file to style the task management app, including a container for displaying tasks and a form for adding new tasks.
- Create a `styles.css` file.
- Add styles for the task container and the form for adding tasks.

## Activity 2: Creating Tasks

### Task 3: Add a form to the HTML structure with fields for entering task details (e.g., title, description, due date). Style the form using CSS.
- Update `index.html` to include the task form with appropriate fields.
- Style the form in `styles.css`.

### Task 4: Write a script to handle form submission, creating a new task object and adding it to an array of tasks. Display the new task in the task list.
- Create a JavaScript function to handle form submissions.
- Add the new task to an array and display it in the task list.

## Activity 3: Reading and Displaying Tasks

### Task 5: Write a function to iterate over the array of tasks and display each task in the task list. Include task details like title, description, and due date.
- Create a function to loop through the task array and display each task.

### Task 6: Style the task list using CSS to make it visually appealing.
- Style the task list in `styles.css` to enhance its visual appeal.

## Activity 4: Updating Tasks

### Task 7: Add an "Edit" button to each task item in the task list. Write a function to populate the form with the task details when the "Edit" button is clicked.
- Add an "Edit" button to each task in the list.
- Write a function to populate the form with the selected task's details when "Edit" is clicked.

### Task 8: Write a function to update the task object in the array and refresh the task list display after editing a task.
- Create a function to update the task in the array.
- Refresh the task list display to reflect the updated task.

## Activity 5: Deleting Tasks

### Task 9: Add a "Delete" button to each task item in the task list. Write a function to remove the task from the array and refresh the task list display when the "Delete" button is clicked.
- Add a "Delete" button to each task in the list.
- Write a function to remove the task from the array and refresh the display.

### Task 10: Add a confirmation dialog before deleting a task to prevent accidental deletions.
- Implement a confirmation dialog before deleting a task.

## Feature Requests

### 1. Task Creation Script
- Write a script to handle form submission, creating new tasks and displaying them in the task list.

### 2. Task Display Script
- Create a script to display tasks from the array in the task list, including task details and styling.

### 3. Task Update Script
- Write a script to handle task editing, updating the task in the array, and refreshing the display.

### 4. Task Deletion Script
- Create a script to handle task deletion, removing the task from the array and refreshing the display with a confirmation dialog.