Star Rating Component

About the Challenge

In this challenge, I have build a Star Rating Component.
This challenge is perfect for you if you're interested in building front-end web components and taking your front-end skills to the next level!
You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this might be a great way to push yourself.

Challenge Requirements

1. The Star Rating component should display a set of stars that can be clicked or hovered over to select a rating.
2. The component should be customizable, with an option to change the number of stars to be displayed.
3. When the user clicks on a star to select a rating, the rating should be updated, and a corresponding message should be displayed.
4. The component should ensure that hovering over the third star after selecting the fourth star highlights only the first, second and third stars.
5. Show the hover state of all the elements.
6. The component should be responsive and display correctly on different screen sizes.
7. Make this landing page look as close to the design as possible.

What you'll Learn

In this frontend challenge, you'll learn how to build a real-world UI component using JavaScript or ReactJs. You'll also learn how to use CSS Flexbox to lay out the component and make it responsive. This frontend challenge is a great opportunity to improve your JavaScript or ReactJs skills by building a frontend web component. So what are you waiting for?

Demo

You can see a live preview on my Code Pen tool: Code Pen

Screenshot

Features

1. Star Selection: Click on stars to select a rating.
2. Responsive Design: Adjusts layout for different screen sizes.
3. Hover Effect: Stars highlight on hover.
4. Rating Text Display: Displays corresponding text for selected stars.
5. Accessibility: Uses semantic HTML and ensures interactive elements are accessible.

Technologies Used

1. HTML: Structure of the star rating component.
2. CSS: Styling for the component and responsiveness.
3. JavaScript: Functionality to handle star selection, hover effects, and text display.
4. Font Awesome: Icons used for star representation.

Installation

1. Clone the repository:
git clone https://github.com/Yashi-Singh-1/Star-Component-Rating.git
2. Open index.html in your web browser.

Usage

1. Click on stars to select your rating.
2. Hover over stars to see the hover effect.
3. The selected rating will be reflected in the hidden input field.
4. Corresponding rating text will display below the stars.

Contributing

Contributions are welcome! Here's how you can contribute:

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -am 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a pull request.

Please make sure to update tests as appropriate and follow the existing code style.

Acknowledgments

1. Font Awesome for star icons.
2. MDN Web Docs for valuable resources.

Credits

The credits go to the FrontendPro Challenge for their Star Rating Challenge

Resouces

Want to learn more about Flexbox? Check out An Interactive Guide to Flexbox