Budget Cap Meter Contact Block for React

The bar stops at full, the panel's line under the figure turns into "$4,200 over the cap" with an icon, and submitting shows "Bring the total to $50,000 or less: it is $4,200 over." under the budget lines and moves focus to the first line. Nothing stops you typing past the cap, so a visitor can see by how much they are over. The cap is CAP at the top of the file.

Each line's share of the total is rounded down, then the leftover points go to the lines with the biggest remainders (the largest-remainder method), so the four shares always add up to exactly 100%. The monthly figure is the total divided by the project length, rounded to a dollar.

Each budget line takes digits and shows them with thousands separators once you leave the field. The project length takes 1 to 36 months, by typing or with the minus and plus buttons. When a budget line loses focus, one hidden status line says where the total stands ("Total $38,500 of $50,000: $11,500 remaining under the cap"); nothing is announced while you type.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks that the total is above zero and under the cap, the length is 1 to 36 months, the summary has 15 to 120 words, and the organisation and the email (with an @ and a domain) are filled. Each problem appears under its field with an icon and focus moves to the first one. Leaving a filled field checks it, and editing a field that shows an error re-checks it as you type.

Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call: details holds the lines, the length, the summary, the organisation and the email. The confirmation repeats the total, the length and the organisation and says a program officer will write to the address given; it promises nothing else. The call and its cap are made up, and the panel says so.

Below lg the split stacks: the header, the form, then the panel. The four lines go two across down to 360 pixels and one per row below, and a one-line total sits under them, so the sum is in view while you type. The framed panel with the bar, the shares and the monthly cost follows the button.