If you’re working with a list of numerical ratings on your website or application, you might want to display them as star ratings for a more visually appealing and user-friendly experience. Whether it’s product ratings, user feedback, or reviews, a star rating system can make your content more engaging. In this tutorial, we’ll show you how to quickly and easily convert numerical values into a star rating display using jQuery. In just five minutes, you’ll learn how to transform plain numbers into a visually appealing ★★★☆☆ format that is perfect for any website or app.
Let’s dive into the step-by-step process to implement this simple but effective feature!
Setup
First, set up the icon font for the Star icon. All you need to do is include a single line of HTML into your document <head>:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">Second, write a function to parse & convert a number into Star Rating display:
function star(rate) {
var starHTML = '';
var rate = parseInt(rate);
var increment = 0;
var max = 5; // maximum rating
while(increment < rate) {
starHTML += '<i class="material-icons orange">grade</i>';
increment++;
}
while(max > rate) {
starHTML += '<i class="material-icons gray">grade</i>';
max--;
}
return starHTML;
};In the star function, we’ve defined following variables:
- starHTML – to incorporate the star icon.
- rate – to convert the parameter (rate) into integer.
- increment – an increment variable
- max – the maximum star icon that we want to display
Then, we have 2 blocks of while loop statement. The first one is to generate orange star icon, while the second is to generate gray star icon.
Once complete, we return starHTML from the star function.
Third, declare CSS styles for the star icon:
.gray {
color: gray;
}
.orange {
color: orange;
}That’s it!
We’ve done everything! Let’s see how to use it!
Using star Function
In this example, we have an object that contains 2 customer reviews.
We iterate with a for loop, and calling star function on every iteration.
Lastly, we append the snippet into the StarPlaceholder div.
<script>
var obj = {
1: {
rating: 5,
title: 'Like it so much!'
},
2: {
rating: 3,
title: 'Overall is ok.'
}
};
var snippet = '';
for (var key in obj) {
snippet += '<div>' + star(obj[key]['rating']) + '</div>';
}
$('#StarPlaceholder').append(snippet);
</script>Conclusion
Congratulations! You’ve successfully learned how to turn numerical ratings into a star rating display using jQuery. This simple yet powerful technique enhances the visual appeal of your website, making ratings easier for users to understand at a glance. Whether you’re displaying product reviews, user feedback, or service ratings, the star rating system is a great way to improve user experience. Feel free to customize the design further to match your site’s theme. If you found this tutorial helpful, don’t forget to share it, and check out our other jQuery tutorials for more tips and tricks!
Follow onlyWebPro.com on Facebook now for latest web development tutorials & tips updates!