Star Rating
Create a star rating widget that allows users to select a rating value.
Requirements
- The widget accepts two parameters: the maximum number of stars and the number of currently filled stars.
- When a star is clicked, it is filled along with all the stars to its left.
- Hovering over a star fills that star and all stars to its left.
- The stars which need to be filled during hover take priority over existing filled state.
- If the cursor leaves the widget and no new selection is made, the appropriate stars revert to the filled state before the hovering.
- Make the star rating widget reusable such that multiple instances can be rendered within the same page.
The star icons, both empty and filled, are provided to you as SVGs.
Asked at these companies
Sponsor: SwagOverflowEvery dev's worst enemy? Their own code from a month ago. This black tee captures that moment of existential crisis when you debug your own work and wonder who could have written this mess, only to realize it was you. A must-have for front end engineers who know the struggle.
Sponsor: SwagOverflowEvery dev's worst enemy? Their own code from a month ago. This black tee captures that moment of existential crisis when you debug your own work and wonder who could have written this mess, only to realize it was you. A must-have for front end engineers who know the struggle.
Star Rating
Create a star rating widget that allows users to select a rating value.
Requirements
- The widget accepts two parameters: the maximum number of stars and the number of currently filled stars.
- When a star is clicked, it is filled along with all the stars to its left.
- Hovering over a star fills that star and all stars to its left.
- The stars which need to be filled during hover take priority over existing filled state.
- If the cursor leaves the widget and no new selection is made, the appropriate stars revert to the filled state before the hovering.
- Make the star rating widget reusable such that multiple instances can be rendered within the same page.
The star icons, both empty and filled, are provided to you as SVGs.
Asked at these companies
Similar questions
Sponsor: SwagOverflowEvery dev's worst enemy? Their own code from a month ago. This black tee captures that moment of existential crisis when you debug your own work and wonder who could have written this mess, only to realize it was you. A must-have for front end engineers who know the struggle.
You must be signed in to view your saved versions
Loading editor
Loading editor
Loading editor
JavaScript Console
console.log() statements will appear here.