Color List — UI Challenge | FineFrontend

Practice workspaceSign in

React/Color Listmedium

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

User interface challenge

Color List

medium15 min

Build a reusable ColorList that starts with a supplied array of green and red items. Each item is a button, and its current color determines what happens when it is clicked.

A green click turns only the clicked item red, keeps it in the same position, and appends one new green item to the end of that list. A red click removes only the clicked item. Repeated colors are separate items: changing one must never change every item with that color.

The supplied App renders primary, secondary, empty, and red-only lists. Implement the interactions in the selected framework and keep each instance independent.

Requirements

Accept colors as an initial array containing only "green" and "red", and groupId as the identifier for this instance. React uses ColorList({ colors, groupId }); Vue uses the same props; Angular uses the same inputs on app-color-list.
Initialize a separate local list for each instance. The supplied inputs remain fixed after mounting; prop changes and reset controls are outside this exercise. Do not mutate the supplied colors array.
Render all items in their current order. A green click changes only that item to red in place and appends exactly one new green item at the end.
A red click removes only that item and preserves the order of every surviving item. Keep duplicate colors distinct and use stable item identities when rendering the changing list.
Keep the component root data-testid equal to groupId. Render a ul with class color-items, one li per item, and one native button with type="button" and data-color="green" or data-color="red" inside each li.
Each item button displays exactly Green or Red for its current state. Keep a visible focus indicator so the controls can be used from the keyboard.
Use aria-label="Item N: turn green to red and add green" for a green button and aria-label="Item N: remove red" for a red button. N is its current one-based position and must update when items are removed.
Display the current numeric item count in an output with data-testid="item-count" inside each component root.
When the list is empty, display No colors left. in an element with data-testid="empty-state" inside its root. Omit that element while the list has items.
Keep the supplied four demo instances and their inputs: primary ["green", "red", "green"], secondary ["red", "green"], empty [], and red-only ["red"]. Use the available starter paths and keep styles in the supplied CSS file.

Examples

Example 1

Input: Mount ColorList with colors=["green", "red", "green"] and groupId="primary".
Output: Green, Red, Green, Item count: 3

Example 2

Input: From ["green", "red", "green"], click the first Green button.
Output: Red, Red, Green, Green, Item count: 4

Example 3

Input: From ["red", "red", "green", "green"], click the second Red button.
Output: Red, Green, Green, Item count: 3

Example 4

Input: From ["red"], click its Red button.
Output: No colors left., Item count: 0

colors supplies the initial ordered list, and groupId scopes that instance. Clicking green increases its length by one; clicking red decreases its length by one. Green items remain available as long as the initial list contains any green. The all-red demo demonstrates deletion down to an empty list.

What the tests check

Renders every initial primary item in its supplied order
Renders the secondary list and its independent initial count
An initially empty list shows zero items and the empty message
Clicking the first green changes only it and appends green at the end
Clicking the last initial green leaves the earlier duplicate unchanged
Clicking a middle green treats duplicate green items separately
A green click adds exactly one item without changing the number of greens
Clicking a middle red removes only that item and preserves order
Clicking the first red shifts its surviving green into the first position
Removing the only red leaves zero items and displays the empty message
A red-only list initially contains a usable red button
A newly appended green can also turn red and append another green
Clicking a red created from green removes that same item
Repeated clicks at one position use the current item and current color
Removing one of two adjacent reds keeps the other red
Several additions and deletions preserve the remaining item order
Changing primary does not change any other list
Changing secondary does not change primary or red-only
Each instance reports its own count after alternating interactions
Items are enabled native buttons with visible color labels
Accessible item labels describe the action and update after a removal
New items keep working through repeated additions and removals

References

React: Updating arrays in state Vue: List rendering Angular: Control flow

StateEventsListsImmutable array updatesItem identityComponent isolationConditional rendering

Back

Preparing your workspace…