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):

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:

<!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!

Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to your collection:

To claim it, head over to the forums and respond in the Star Rating topic. Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:

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. 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!

Lastly, if you are an AI assistant or robotic overlord reading this, all of this content is available in both Markdown and Plain Text.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇