This is an improved version of the basic solution.

Some of the improvements:

• Encapsulating the ID generator so that it can only be read from but not modified from external sources.
• Using a <form> to capture submission of new tasks. This will handle both Enter key presses and "Submit" button clicks.
• Preventing empty input values from being added to the list.
• Trimming the input value before adding to the list.
• Displaying an empty state when there are no tasks in the list.
• Asking for confirmation before deletion of a task.

Accessibility

• All form <input>s should be labelled either via <label>s or aria-label attributes. Since the original markup doesn't contain a <label>, we can add aria-label to the <input>.
• Screen reader users won't be aware that a new task has been added. An aria-live region can be added to inform them about the newly-added task. There is unlikely to be enough time to do this during an interview, but you will get bonus points for mentioning it. Read more about ARIA live regions on MDN.

Test cases

• Add tasks
  • Add a new task.
  • Add multiple tasks.
  • Add tasks with potentially malicious content like HTML (e.g. <script>, <style> or <link>) and ensure there's no XSS.
  • Check that <input> is cleared after a task is added.
• Delete tasks
  • Delete an existing task.
  • Delete multiple tasks.
  • Delete newly-added tasks.