# Star Rating

by [kirupa](https://www.kirupa.com/about/whatiskirupa.htm) | filed under [Coding Exercises](https://www.kirupa.com/codingexercises/index.htm)

From movies to restaurants to that phone charger we bought online, it seems like everything gets rated with stars these days. In this exercise, we are going to build a ***star rating*** widget of our own. Hover over the stars and click on one to give a rating (or [open it in a new window](https://www.kirupa.com/codingexercises/examples/star_rating.htm)):

Your star rating needs to do the following:

1. Display five stars
2. When we hover over a star, that star and every star before it should light up
3. Clicking a star sets the rating
4. When the mouse moves away from the stars, the stars go back to showing the rating that was clicked on
5. Display a message with the selected rating, such as **You rated this 4 out of 5 stars**

For extra credit, add a little animation to the star that gets clicked. You can also display a label like *Terrible* or *Amazing!* that matches the star being hovered over.

Onwards!

## Starting Point

Create a new HTML document in your favorite code editor (like Visual Studio Code) and copy/paste the following starting content into it:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Star Rating</title>
  <style>
    
  </style>
</head>
<body>
  <h1>How would you rate this exercise?</h1>

  <div class="stars">
    <button class="star" data-value="1">★</button>
    <button class="star" data-value="2">★</button>
    <button class="star" data-value="3">★</button>
    <button class="star" data-value="4">★</button>
    <button class="star" data-value="5">★</button>
  </div>

  <p id="message"></p>

  <script>
    
  </script>
</body>
</html>
```

This gives us five star buttons, each with a `data-value` attribute that tells us which rating it represents, and a place to display our message. The styling and the JavaScript are what you will add entirely on your own!

#### Hint: Some Learning Resources

The following tutorials may provide some helpful tips and techniques to help you with this exercise: [Mouse Events in JavaScript](https://www.kirupa.com/html5/mouse_events_in_javascript.htm), [Handling Events for Many Elements](https://www.kirupa.com/html5/handling_events_for_many_elements.htm), [Custom Data (data-*) Attributes](https://www.kirupa.com/html5/custom_data_attributes.htm), [Using the classList API](https://www.kirupa.com/html5/using_the_classlist_api.htm), [Introduction to CSS Transitions](https://www.kirupa.com/html5/introduction_css_transitions.htm)

## Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to [your collection](https://forum.kirupa.com/badges/):

![Star Rating badge](https://www.kirupa.com/codingexercises/images/star_rating_badge.png)

To claim it, head over to the forums and respond in the [Star Rating topic](https://forum.kirupa.com/t/star-rating-frontend-coding-exercise/683600). **Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:**

![](https://www.kirupa.com/codingexercises/images/create_forum_topic.webp)

Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.

## Stuck? Need Help? Want a Code Review?

We want to make this a fun learning activity. If you are stuck and need help, please [ask on the forums](https://forum.kirupa.com). Please explain your problem in detail and one of the many helpful forum members will help you out.

Similarly, if you want feedback on your code, please also ask in the forums. This would be an excellent chance for you to learn how you can improve your solution from other web developers!