#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 Progress component that accepts:
  • value: number — the progress value.
  • showValue?: boolean — shows the numeric value inside the bar if true.
• Clamp value between 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 showValue is true:
  • Use white text if value > 50.
  • Use black text if value ≤ 50.
• Change the background color based on value:
  • <30: bg-red-500
  • 30–69: bg-yellow-500
  • >=70: bg-green-500
• Ensure full accessibility:
  • role="progressbar"
  • aria-valuenow reflects the clamped value
  • aria-valuemin="0"
  • aria-valuemax="100"
• Integrate 4 Progress bars in an App and 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

1. renders the app title
2. renders 4 progress bars with values between 0 and 100
3. renders a Random button
4. updates progress bars when clicking the Random button
5. renders the progress bar with correct ARIA attributes
6. shows the value text when showValue is true
7. applies correct background color based on value
8. clamps value below 0
9. clamps value above 100
10. warns when value is below 0
11. warns when value is above 100
12. does not warn when value is within 0-100
13. displays the value text in correct color based on value