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
