A Simple JavaScript Technique for Filling Star Ratings

In this small tutorial, we will describe a simple but useful method for filling star rankings in HTML, CSS and JavaScript. Here is what we will build:

Enter the icons of the stars

For our example, we will need the following two icons:

With this in mind, let's add the following icons. first the popular Font Awesome library in our project:

The Markup

Regarding the markup, we need to A table with six lines The first row contains the headers th while the other five rows carry the details of the hotel. Obviously, in your own projects, these lines may represent something different.

This is the required HTML code:

More importantly, note the markup that is included in the second td of each line:

This is the markup that we need to stylize in order to visualize the star ratings of our hotels.

Up to now, our project looks like this:

CSS

At this point, let's add some basic CSS to the table, as follows:

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

Let's go over a few points at this point

We load the desired Font Awesome icons via CSS. It's a two-step process. First, we apply font-family: FontAwesome to the parent superior element (that is, .stars-outer ). Then, we add the icons to the pseudo-target elements by defining their unicode characters .

Here is the unicode for the first icon:

And here is the unicode for the second:

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

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

Empty Stars

Notice that only the first icon appears. But why? This is because we have already defined this CSS rule:

By removing this rule, the second icon will appear above the first, like this:

And if we were to do it ] .stars-inner elements 50% wide, we reveal half of them:

Whatever the case may be, first of all width of the The element .stars-inner must be 0 and we will update it dynamically according to the value of the l & # 39; concerned hotel. Let's see how this goes in the next section

The JavaScript

Suppose our hotels have the following values:

Keep in mind that, for the sake of simplicity, we specify the above hard-coded values ​​(between 0 and 5). In a real project however, these can be retrieved via an AJAX request. Also, in the real world, we should check to make sure the derived values ​​are between 0 and 5.

Now that we have the ratings, we do the following:

  1. We loop through the object ratings . Note that the name of each object key corresponds to 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 enter its value and convert it to a percentage value.
  3. We round the value above to the nearest ten. This means that the resulting value will be 0%, 10%, 20%, 30%, etc. This is important because it allows us to create half-stars. For example, a value of 50% indicates that two and a half stars are filled.
  4. We have defined the thickness width of the target element .stars-inner equal to the rounded value.

According to what we have described above, here is the associated code:

The final version of our project is as follows:

Browser Support

This demo has been tested on different devices and works well. However, if you have problems, let me know in the comments below. Moreover, as you may have noticed, we use Babel to compile our code ES6 to ES5

Conclusion

In this little tutorial, we have covered a method for star filling. Fortunately, you enjoyed working on the end result – you could even enjoy this technique in an upcoming project, or improve it for your own needs.

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