Challenge: Dynamic To-Do List Application

Problem statement

You need to create a dynamic to-do list application with the following requirements:

• Application setup: The application should have an HTML structure with a heading, an input field, a button to add tasks, and a list to display tasks (already provided in the index.html file below).

• Core features:

  • Add a new task: Users should be able to add tasks dynamically to the list by entering text and clicking a “Add Task” button.

  • Delete a task: Each task should have a delete button that removes it from the list when clicked.

  • Task count: The total number of tasks should be displayed and updated dynamically.

• Unique identifiers: Maintain a unique task ID for each new task added.

• Dynamic rendering: The tasks should be displayed dynamically and updated in real-time as tasks are added or removed.

• Asynchronous functionality: When the application starts, it should load an initial list of tasks from a simulated server with a slight delay. Simulate a delay while adding a new task, showing a loading indicator before the task appears.

• Interactive styling: Tasks should have visual indicators or styling changes to reflect their state (e.g., marked as completed).

Try it yourself

Write code in the following playground and then click the “Run” button: