There are a few ways to approach this questions:
<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.
When rendering user input, there's a risk of inserting potentially malicious content resulting in Cross Site Scripting (XSS). To prevent XSS:
Node.textContentinstead which inserts strings as raw text rather than parsing it as HTML.
<input>s should be labelled either via
aria-labelattributes. Since the original markup doesn't contain a
<label>, we can add
aria-liveregion 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.
<link>) and ensure there's no XSS.
<input>is cleared after a task is added.
You are viewing the solution. Any changes made to the code are not saved.