Campaign Planner Fundraiser Contact Block for React

Each channel has a raise in dollars for a 4-week plan (CHANNELS), and each length scales every channel by a pace (LENGTHS: 0.7, 1 and 1.25). The projection adds the dollars of the channels in the plan, rounds each to the hundred, and divides by the goal, capped at 100%. The numbers are invented: replace them with your own results and the rest follows.

Whole dollars from $2,000 to $200,000 (MIN_GOAL, MAX_GOAL), grouped with commas as you leave the field; the steppers move it by $500. Leaving it empty shows "Enter the amount you want to raise" on submit and moves focus to the field. The plan stays editable until the form is sent.

The big percentage and the bar are decorative; the sentence under them is the readout. A hidden status line repeats it about 600 milliseconds after the visitor stops changing something, and says nothing on load, so typing a goal does not read every digit.

No. At least one channel must be on: otherwise submit shows "Pick at least one channel to carry the plan" under the tiles and moves focus to the first tile. The tiles are a group of toggle buttons that keep their pressed state in the foreground colour; with none on, the projection reads 0%.

Yes. Dollar figures sit in left-to-right spans, the goal field keeps its "$" before the number, the segment labels and the "+24% of goal" lines are isolated with bdi, and the step markers and the hairline between them use logical positions.

Nowhere yet: the submit handler waits 800 milliseconds, then shows the confirmation. Replace that timer in submit with a call to your campaign desk; details and channels hold everything the visitor chose.