Reactive Task List Manager

This challenge asks you to build a simple reactive task list manager in JavaScript. Reactive programming allows your application to automatically update when underlying data changes, leading to a more responsive and maintainable user experience. This exercise will help you understand the core principles of reactivity and how to apply them in a practical scenario.

Problem Description

You need to create a JavaScript application that manages a list of tasks. The application should allow users to:

1. Add a new task: The task should have a title (string) and a status (boolean, initially false representing "incomplete").
2. Mark a task as complete: Change the status of a task to true.
3. Delete a task: Remove a task from the list.
4. Display the task list: Show the tasks in a user-friendly format, indicating their title and status (e.g., "Task 1: Incomplete" or "Task 2: Complete").

The key requirement is that the display should react to any changes in the task list. Whenever a task is added, updated, or deleted, the displayed list should automatically update without requiring a manual refresh. You can use any reactive programming library or pattern you prefer (e.g., Proxies, Observables, Signals, or a custom implementation). For simplicity, you don't need to create a full-fledged UI with HTML and CSS; focus on the reactive logic in JavaScript. You can represent the UI as console output for demonstration purposes.

Examples

Example 1:

Initial Task List: []

Add Task: "Grocery Shopping"
Updated Task List: [ { title: "Grocery Shopping", completed: false } ]

Mark Complete: "Grocery Shopping"
Updated Task List: [ { title: "Grocery Shopping", completed: true } ]

Delete Task: "Grocery Shopping"
Updated Task List: []

Example 2:

Initial Task List: [ { title: "Laundry", completed: false }, { title: "Walk the dog", completed: true } ]

Add Task: "Pay Bills"
Updated Task List: [ { title: "Laundry", completed: false }, { title: "Walk the dog", completed: true }, { title: "Pay Bills", completed: false } ]

Mark Complete: "Laundry"
Updated Task List: [ { title: "Laundry", completed: true }, { title: "Walk the dog", completed: true }, { title: "Pay Bills", completed: false } ]

Example 3: (Edge Case - Empty List)

Initial Task List: []

Delete Task: "Something that doesn't exist"
Updated Task List: []

Constraints

• The task list should be stored internally as an array of objects, where each object has title (string) and completed (boolean) properties.
• The application should handle cases where a task title is not found when marking complete or deleting. In such cases, the task list should remain unchanged, and a message indicating the task was not found should be printed to the console.
• The application should be reasonably efficient. While performance is not critical for this small example, avoid unnecessary iterations or computations.
• You are free to use any JavaScript features and libraries you are comfortable with, but keep the solution relatively concise and readable.

Notes

• Consider how you will represent the "reactive" aspect of the system. How will changes to the task list trigger updates to the display?
• Think about how to manage the state of the task list effectively.
• You can use functions to encapsulate the different operations (add, complete, delete, display).
• For the display, you can simply print the task list to the console in a readable format. No need for a full UI implementation.
• Focus on the core reactive logic rather than complex error handling or input validation. Assume the input is always valid.
• A good solution will demonstrate a clear understanding of how to make the application respond to changes in the task list automatically.