The ONE star rating system — the future of rating
Tags: html, css, webdev, beginners
Published: 2021-07-06 20:42:12

Recently, a lot of folks tried their best to provide a star rating system. Now it's time to bring THE "star rating" that will change the world!

I called it: **The ONE star rating**

{% details <sup>Click here if you want to catch up with the previous episodes before continuing</sup> %} 

{% post https://dev.to/inhuofficial/5-star-rating-system-actually-accessible-no-js-no-wai-aria-3idl %}
{% post https://dev.to/lapstjup/implementing-a-star-rating-component-in-vanilla-js-20ob %}
{% post https://dev.to/madsstoumann/star-rating-using-a-single-input-i0l %}
{% post https://dev.to/afif/scalable-star-rating-without-js-and-no-svg-or-image-for-the-star-2mef %}
{% post https://dev.to/link2twenty/star-rating-using-unicode-stars-3np2 %}
{% post https://dev.to/inhuofficial/star-rating-wars-the-madsafif-menice-an-even-better-star-rating-system-and-a-comparison-3pg5 %}
{% post https://dev.to/siddharthshyniben/star-rating-in-the-terminal-12np %}

{% enddetails %}


Why have multiple stars when we can do the job with only one star? A unique star that can hold all the information. Let's think outside of the box and build the future of rating systems.

See it in play:

{% codepen https://codepen.io/t_afif/pen/KKmVjZq %}


Thanks to my geometry superpower, I divided the star into 5 parts and the number of selected parts will define the rating. So we have our 1 to 5 rating system with only one star!

----

### Why this system will beat all the others?

**It's compact**: All the information is held in a small space. The space needed for one star.

**It's outstanding**: Everyone is getting bored with the old-school star rating. This one will impress your visitors and they will want to rate you with a 5/5!

**`rtl` or `ltr` ??**: stop thinking about that. We no more have a straight direction but a circular one. Do we have direction with clocks? No, we don't! Same thing here, it's a universal circular direction.

And let's not forget all the other advantages:

✔️ No JavaScript.
✔️ No complex HTML code.
✔️ A small CSS code.
✔️ No SVG, No images.
✔️ Works with keyboard navigation.

----

## How does it work?

I kept the same HTML code as my previous implementation. The inputs and one extra element.

{% post https://dev.to/afif/scalable-star-rating-without-js-and-no-svg-or-image-for-the-star-2mef %}

I first start by placing all the inputs (and the extra element) above each other inside a square element.

* The square is defined using a fixed width and a ratio (you can also set the height equal to the width)
* Thanks to `grid-area:1/1`, I can have all the elements above each other without the need of using `position:absolute`
* I add `width:100%;height:100%` to the inputs so they cover the whole area and I make them invisible (but still interactive)

Then, I create the star shape using the `<i>` element and `clip-path`. That shape will have 3 background layers

1. The bottom one that covers the whole star (the grey coloration)
2. The gold middle layer that will define the selected parts. For this, I will use a `conic-gradient` with a `72deg` step (`360deg/5`) controlled with the variable `--p`.
3. The top layer is similar to (2) with a semi-transparent color and controlled with the variable `--l`. Yes, this one will respond to the hover effect.

Now the real trick is the position and shape of our inputs.

Each one is clipped to the top part of the star like shown below:

![Star clip path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcpxb4pjoqa8gqfagrjt.png)

At this step, all of them will define the same part of our star. We have to rotate them so each one will get on the top of a different part.

```css
.stars input:nth-of-type(2) {transform:rotate(72deg)}
.stars input:nth-of-type(3) {transform:rotate(144deg)}
.stars input:nth-of-type(4) {transform:rotate(216deg)}
.stars input:nth-of-type(5) {transform:rotate(288deg)}
```

Now each input is placed on the top of one part of the star and clipped to that part.

I think everyone knows the rest of the story. On `:hover` or `:checked` I change the variables I described previously and we have our ONE star rating.

That's it! With a simple code, we get an innovative star rating. You can easily adjust the size, the circular direction and it does work with default values:


{% codepen https://codepen.io/t_afif/pen/RwVaWyb %}