Todo List

Yangshun TayEx-Meta Staff Engineer

You're given some existing HTML for a Todo List app. Add the following functionality to the app:

Add new tasks on clicking the "Submit" button.
- The <input> field should be cleared upon successful addition.
Remove tasks from the Todo List upon clicking the "Delete" button.

Notes

The focus of this question is on functionality, not styling. There's no need to write any custom CSS.
You may modify the markup (e.g. adding ids, data attributes, replacing some tags, etc.), but the result should remain the same visually.
You may want to think about ways to improve the user experience of the application and implement them (you get bonus credit for doing that during interviews).

Asked at these companies

Premium featurePurchase premium to see companies which ask this question.

View plans

Todo List (Official solution)

Yangshun TayEx-Meta Staff Engineer

Solution

There are a few ways to approach this question:

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, <template>s are used for rendering both initial and new tasks. You might have realized that the task markup is duplicated in two places: the initially-rendered tasks and new tasks.

It is a chore to keep the markup consistent for both initial and new tasks. Using a <template> element makes it easy to render both the initial tasks and newly-added tasks.

This solution also contains some UX improvements:

Use a <form> to capture submission of new tasks. This will handle both Enter key presses and "Submit" button clicks.
Prevent empty input values from being added to the list.
- Useful for preventing accidental additions.
Trim the input value before adding to the list.
Ask for confirmation before deletion of a task.
- Destructive actions should always require double confirmation in case the user accidentally presses the delete button.

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>.
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.

Files

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div>
      <h1>Todo List</h1>
      <form>
        <input
          aria-label="Add new task"
          type="text"
          placeholder="Add your task" />
        <div>
          <button id="submit">Submit</button>
        </div>
      </form>
      <ul></ul>
    </div>
    <template id="task-template">
      <li>
        <span></span>
        <button>Delete</button>
      </li>
    </template>
    <script src="src/index.js"></script>
  </body>
</html>

Loading editor

JavaScript Console

console.log() statements will appear here.

Todo List

Notes

Asked at these companies

Todo List (Official solution)

Solution

Notes

Accessibility

Test cases

You must be signed in to view your saved versions

Loading editor

Loading editor

Loading editor

JavaScript Console