Solution

There are a few ways to approach this questions:

• Add only the necessary DOM event listeners and DOM operations. See solution.
• Use <template>s and client-side render both initial and new tasks. See solution.

In this approach, only the necessary DOM event listeners and DOM operations are added. Refer to the inline comments for explanations on what each part of the code does.

Notes

When rendering user input, there's a risk of inserting potentially malicious content resulting in Cross Site Scripting (XSS). To prevent XSS:

• Sanitize the user input before rendering.
• Avoid setting Element.innerHTML, set Node.textContent instead which inserts strings as raw text rather than parsing it as HTML.

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>.
• For screen reader users, they won't be aware that a new task has been added. An aria-live region can be added to inform about the newly-added task. There is unlikely 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.