
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:
Hotel | Rating |
---|---|
Hotel A |
|
Hotel B |
|
More importantly, note the markup that is included in the second td
of each line:
<div class = "stars-outer"
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:
- 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. - For each object key, we enter its value and convert it to a percentage value.
- 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.
- 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!