logo

Coding Activist

HomeQuestionsMachine CodingTech RoadmapProductEmber
JobsSign In

Transfer List

MediumDOM Manipulation20 min5 tests

Build a two-pane transfer list: move items from an Available list into a Selected list and back, while a live status announces how many are selected.

Create a transfer-list widget with two columns: Available and Selected.

The app starts with three items — "Apples", "Bananas", and "Cherries" — all in the Available list, and the Selected list empty.

  • Each item in the Available list has a button labeled "Add {item}". Clicking it moves that item out of Available and into Selected.
  • Each item in the Selected list has a button labeled "Remove {item}". Clicking it moves that item back out of Selected and into Available.
  • A live region with role="status" always shows the current count as "{n} selected" (e.g. "0 selected", "2 selected").

Items should keep their original ordering within each list (an item returning to Available rejoins in its original relative position is not required, but a stable order is expected — the simplest approach of deriving each list from a single source of truth works well).

Focus on accessible markup: real <button> elements with clear labels, and the count surfaced through role="status".

Requirements

  • Render two lists: Available (starts with Apples, Bananas, Cherries) and Selected (starts empty).
  • Each Available item shows a button labeled 'Add {item}' that moves the item to the Selected list.
  • Each Selected item shows a button labeled 'Remove {item}' that moves the item back to the Available list.
  • Show the count of selected items in an element with role="status" formatted exactly as '{n} selected'.
  • Use real <button> elements; the count must update synchronously after each click.
Hints (3)
  1. Keep a single source of truth: a Set (or array) of which item names are currently selected. Derive the Available and Selected lists from it with .filter().
  2. The status text is just ${selectedCount} selected rendered inside a <div role="status">.
  3. For each item render either an 'Add {item}' or 'Remove {item}' button depending on which list it's in, and toggle membership on click.

Topics

  • React
  • DOM Manipulation

Asked at

Meesho · Ola · Myntra · Unacademy · Urban Company · MakeMyTrip

Join Us
blur