Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Progress Bar
easy25 min
Build a controlled completion indicator. Keep its visual fill, percentage label and accessible value synchronized as the user edits the percentage.
Requirements
Start with input 25 and display 25% completion.
Update immediately when the percentage input changes. Use a text input so invalid entries can be handled predictably.
Convert finite numeric input, clamp it to [0,100], and retain fractional percentages. Empty, whitespace-only or nonnumeric input represents 0.
Set the inner fill width to the normalized percentage and display that same value followed by %.
Use role=progressbar with accessible name Operation completion, aria-valuemin=0, aria-valuemax=100 and the normalized aria-valuenow. Basic track and fill styles are supplied.
Keep the supplied IDs so browser checks can find the controls. Use your selected framework to update the view; do not query or mutate rendered DOM manually.
Examples
Example 1
Input: Enter 60
Output: 60% and a fill covering 60% of the track
Example 2
Input: Enter 125
Output: 100% and a full track
Normalize the input to a finite value in [0,100] and render it consistently.
