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.
-
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.
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.
-
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.
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.
-
Task 6: Style the task list using CSS to make it visually appealing.
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.
-
Task 8: Write a function to update the task object in the array and refresh the task list display after editing a 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.
-
Task 10: Add a confirmation dialog before deleting a task to prevent accidental deletions.
-
Task Creation Script: Write a script to handle form submission, creating new tasks and displaying them.
-
Task Display Script: Create a script to display tasks from the array in the task list, including task details and styling.
-
Task Update Script: Write a script to handle task editing, updating the task in the array and refreshing the display.
-
Task Deletion Script: Create a script to handle task deletion, removing the task from the array and refreshing the display with a confirmation dialog.
By the end of these activities, you will:
-
Set up a basic project structure with HTML and CSS.
-
Implement task creation, reading, updating, and deletion functionalities.
-
Handle form submission to create new tasks and display them in the task list.
-
Update existing tasks and refresh the display with edited task details.
-
Delete tasks from the list with a confirmation dialog to prevent accidental deletions.
-
Style the task management app to make it visually appealing and user-friendly.