Giving Thermometer Philanthropy Awards Block for React

Edit the constants at the top of the file: CAUSES (a name and the round-up dollars each), MATCH_RATE (1 for matched 1 to 1), GRANT (its amount, what the fund held before it arrived, and its date) and GOAL. The ledger rows, the totals, the thermometer's fill, the flag's position and the share of the goal are computed from them, so the sums in the header, the table and the drawing always agree.

It is plain boxes, not a chart library: a tube with a bulb, a fill whose length is a CSS variable set from the total, a tick and a label for each quarter, and the flag. The same elements are positioned along the tube in both orientations, across on a phone and up from lg, so there is one drawing and nothing is duplicated. It is hidden from assistive technology; the total, the goal, the share and the grant are in the text beside it.

The point on the goal the fund reached when the grant arrived: the amount it held before, plus the grant. Move GRANT.before and the flag moves with it. Its date is a fixed time element, never computed from today.

No. The Spruceford Prize, Openhand and the causes are made up for the example. The figures are example data, not results: replace them with your own.

The four columns are narrow enough to fit at 320 pixels, and the table sits in a scrollable region that a keyboard can reach if you add wider columns. Each row has a row header, the grant row says there is no matching, and the totals row sums the three columns.