www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

A Simple JavaScript Technique For Filling Star Ratings

In this short tutorial, we’ll describe a simple, yet useful method for filling star ratings using HTML, CSS and JavaScript. Here’s what we’re going to build:

Grabbing the Star Icons

For our example, we’ll need the following two star icons:

With that in mind, let’s first include the popular Font Awesome library in our project: 

The Markup

With regards to the markup, we need a table with six rows.The first row contains the table headers th, while the other five rows carry hotel details. Obviously, in your own projects, these rows might represent something different.

Here’s the required HTML:

Most importantly, notice the markup which is included in the second td of each row:

This is the markup we have to style in order to visualize the star ratings of our hotels.

So far, our project looks like this:

The CSS

At this point, let’s add some basic CSS to the table, like so:

The next and most important step is to define the styles for the .stars-outer and .stars-inner elements. Here’s the necessary CSS:

Let’s go over a few things at this point.

We load the desired Font Awesome icons through CSS. This is a two-step process. First, we apply font-family: FontAwesome to the top parent element (i.e. .stars-outer). Next, we add the icons to the target pseudo-elements by setting their unicode characters. 

Here’s the unicode for the first icon:

And here’s the unicode for the second one:

Another thing to note is that each of our icons should appear five times inside a table row. For this reason, we lay them out like this:

With the CSS in place, the project looks as follows:

Empty Stars

You’ll have noticed that only the first icon appears. But why? It’s because earlier we defined this CSS rule:

By removing that rule the second icon will appear on top of the first one, like this:

And if we were to make the .stars-inner elements 50% wide, we’d reveal half of them:

Anyhow, initially the width of the .stars-inner element should be 0 and we’ll dynamically update it depending on the rating value of the relevant hotel. Let’s see how that happens in the next section.

The JavaScript

Let’s assume that our hotels have the following rating values:

Keep in mind that, for the sake of simplicity, we specify the aforementioned hard-coded values (between 0 and 5). In a real project though, these might be retrieved through an AJAX request. Plus, in the real world, we should do some checks to ensure the derived values are within the 0 – 5 range.

So now that we have the ratings, we perform the following actions:

  1. We loop through the ratings object. Notice that the name of each object key matches the class name of a table row. In this way, we can link an object key to a hotel.
  2. For each object key, we grab its value and convert it into a percentage value.
  3. We round the aforementioned value to the nearest 10. That means, the resulting value will be 0%, 10%, 20%, 30%, etc. This is important because it allows us to create neat half stars. For instance, a value of 50% denotes that two and a half stars are filled.
  4. We set the width of the target .stars-inner element equal to the rounded value.

Based on what we’ve described above, here’s the associated code:

The final version of our project is the following:

Browser Support

This demo has been tested on various devices and it works well. However, if you encounter any issues, let me know in the comments below. Additionally, as you’ve possibly noticed, we use Babel to compile our ES6 code down to ES5.

Conclusion

In this short tutorial, we covered a method for filling star ratings. Hopefully, you’ve enjoyed working towards the final result–you might even take advantage of this technique in an upcoming project, or improve on it for your own needs.

As always, if you have any questions, share them with us in the comments below!