#31Progress Bar
Overview
Create a visual Progress Bar component in React that displays a percentage with dynamic colors and optional numeric display.
Requirements
- Implement a
Progresscomponent that accepts:value: number— the progress value.showValue?: boolean— shows the numeric value inside the bar if true.
- Clamp
valuebetween 0 and 100. - Render the progress as a horizontal bar with width based on the clamped value.
- Display the numeric value inside the bar if
showValueis true:- Use white text if
value > 50. - Use black text if
value ≤ 50.
- Use white text if
- Change the background color based on value:
<30: bg-red-50030–69: bg-yellow-500>=70: bg-green-500
- Ensure full accessibility:
role="progressbar"aria-valuenowreflects the clamped valuearia-valuemin="0"aria-valuemax="100"
- Integrate 4 Progress bars in an
Appand a button to generate random values for all bars.
Notes
- The markup for the bars and button is provided — focus only on the logic and pass the tests.
- TailwindCSS can be used for styling, but any method is fine.
Tests
- renders the app title
- renders 4 progress bars with values between 0 and 100
- renders a Random button
- updates progress bars when clicking the Random button
- renders the progress bar with correct ARIA attributes
- shows the value text when showValue is true
- applies correct background color based on value
- clamps value below 0
- clamps value above 100
- warns when value is below 0
- warns when value is above 100
- does not warn when value is within 0-100