list-of-counters-challenge.md

List-of-counters UI challenge for evaluating frameworks

Stage 1

Create a counter component with

• Some text displaying total count
• An "increment" button
• A "decrement" button

Stage 2

Create a list of counters with:

• A top-level button that, when clicked, appends a new counter to the page.
• A "Remove" button next to each counter that removes that exact counter from the page.
• A text displaying the total count of all current counters on the page
• A button that, when clicked, increments all counters on the page by 1

Requirements

• Do not modify any code for the individual counter from stage 1 to refactor it to work for stage 2. Pretend it is a third-party, installed module that you cannot modify.
• Each counter keeps its own count, unaffected by other counters
• The total should update when counters are removed and always be accurate to the counters on the page

Bonus stages

1. Add a "starting count" input next to the "new counter" button that sets the counter's initial value. Do not modify the counter code for this.
2. List-of-lists: Add the ability to add and remove lists of counters

• A "new counter list" button creates an entire list of counters (see Step 2) for this component
• Each list-of-lists should have its own remove button
• Add another "Total count" metric above all counter lists that sums up all counters on the page
• Do not modify the counter-list component code for any of this functionality