Freelancer Rates Budget Profile Block for Vue

Edit SKILLS at the top: each has a name, a proficiency in halves from 0 to 5 and a rate in dollars an hour. MIN_BUDGET, MAX_BUDGET and TYPICAL_HOURS set the field's range and the project length the summary compares against. Hours are the budget divided by the rate, rounded down, so there is nothing else to keep in step.

The table uses the nearest allowed value and the line under the field says so, for example Using the least, $500. A blank field counts as the least. Digits typed in a right-to-left locale are read correctly. On React Aria the field commits on blur, Enter or an arrow rather than on each keystroke.

Only the foot's action. While it is on, the one primary button reads Start a project; when you turn it off it is replaced by an outline Join the waitlist button, and the status line says when she takes work again. Both answer in the page and nothing is sent, so you can wire the first to your project form and the second to a waitlist.

The budget, the switch and both buttons. The status line says Project noted in this demo, nothing was sent, or the same for the waitlist. To make it real, post the budget and the chosen skills to your API from the button handlers and show its answer in the same line.

The field and the switch have visible and spoken names, the table has column and row headers, and each skill's proficiency is spoken as a number out of 5 while the drawn stars are hidden from assistive technology. The status line is a polite live region present from the start. Every control works from the keyboard.

The budget and the switch wrap onto two lines, the proficiency column is dropped (it is still spoken), and the table keeps its skill, rate and hours. The foot stays pinned to the bottom of the screen. Rates keep their order in a right-to-left layout.