User ratings are a powerful tool for feedback and engagement. Whether you’re building an e-commerce site, a review system, or a feedback form, a 5-star rating system is a great way to let users share their opinions visually.
In this blog, we’ll create a fully functional 5-star rating system using pure HTML, CSS, and JavaScript—no external libraries required!
Features of Our Star Rating System
✅ Interactive Hover Effect – Stars change color when hovered.
✅ Click to Select a Rating – Users can lock in their rating with a click.
✅ Live Rating Display – The selected rating updates dynamically.
✅ No Libraries Needed – Simple, clean code using pure JavaScript.
🚀 Code Breakdown
1️⃣ HTML: The Star Rating Structure
We use 5 star symbols (★) inside a <div> and assign data-value attributes to each star:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>5 Star Rating</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="star-rating" id="starRating"> <span class="star" data-value="1">★</span> <span class="star" data-value="2">★</span> <span class="star" data-value="3">★</span> <span class="star" data-value="4">★</span> <span class="star" data-value="5">★</span> </div> <p id="ratingValue">Rating: 0</p> </div> <script src="script.js"></script> </body> </html>
How It Works:
- Each star (
★) is given adata-value(from 1 to 5). - The
<p>below displays the selected rating. - A
<script>file will handle the interactions.
2️⃣ CSS: Styling the Rating Component
Now, let’s make it visually appealing with CSS:
body { background-color: #4a77f7; font-family: "Poppins", sans-serif; } .container { position: absolute; background-color: #ffffff; display: inline-block; padding: 30px 70px; border-radius: 10px; transform: translate(-50%, -50%); left: 50%; top: 50%; text-align: center; font-size: 20px; } .star-rating { display: flex; direction: row; font-size: 2rem; cursor: pointer; color: #d3d3d3; /* Default gray color */ } .star-rating .star { transition: color 0.2s ease-in-out; } .star-rating .star.filled { color: #ffcc00; /* Yellow for selected stars */ } This makes the stars pop slightly when hovered!
🔥 Store Ratings – Save the rating in localStorage to remember user input.
🔥 Use Emojis – Replace ★ (★) with emojis like 👍 or ❤️ for a fun twist.
🎯 Final Thoughts
This 5-star rating system is a simple yet powerful tool for collecting user feedback. It’s lightweight, customizable, and doesn’t require any external libraries!
🔹 Perfect for:
- Product Reviews ⭐⭐⭐⭐⭐
- User Feedback Forms 📝
- Movie & Book Ratings 🎬📚
✅ Try it out and make it your own! 🚀
Use
create star rating html css and javascript showing live user rating count.