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,
<template>s are used for rendering both initial and new tasks. You might have realized that you have the task markup duplicated in two places: the initially-rendered tasks and new tasks.
It is a chore to make the markup consistent for both initial and new tasks. Using a
<template> element will make it easy to render both the initial task and newly-added tasks.
This solution also contains some UX improvements:
<form>to capture submission of new tasks. This will handle both Enter keys and "Submit" button clicks.
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.