A Simple JavaScript Technique for Filling Star Ratings

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:

 table {
margin: 0 auto;
text-align: center;
border-collapse: collapse;
border: 1px solid # d4d4d4;
font size: 20px;
background: #fff;
}

th table,
table tr: nth-child (2n + 2) {
background: # e7e7e7;
}

th table,
td {table
upholstery: 20px 50px;
}

table th {
border-bottom: 1px solid # d4d4d4;
} 

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

 .stars-outer {
display: inline-block;
position: relative;
font-family: FontAwesome;
}

.stars-outer :: forward {
content: " f006  f006  f006";
}

.stars-inner {
position: absolute;
at the top: 0;
left: 0;
white space: nowrap;
hidden overflow;
width: 0;
}

.stars-inner :: before {
content: " f005  f005  f005  f005  f005"
color: # f8ce0b;
} 

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:

 .stars-outer :: before {
content: " f006  f006  f006";
}

.stars-inner :: before {
content: " f005  f005  f005  f005  f005"
} 

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:

 .stars-inner {
width: 0;
} 

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:

 const ratings = {
hotel_a: 2.8,
hotel_b: 3.3,
hotel_c: 1,9,
hotel_d: 4.3,
hotel_e: 4,74
}; 

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:

 const starTotal = 5;

for (const rating in ratings) {
// 2
const starPercentage = (notes [rating] / starTotal) * 100;
// 3
const starPercentageRounded = `$ {(Math.round (starPercentage / 10) * 10)}%`;
// 4
document.querySelector (`. $ {rating} .stars-inner`) .style.width = starPercentageRounded;
} 

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!