DEV Community

Cover image for The "safe" star rating & the ONE star unlimited rating
Temani Afif
Temani Afif

Posted on • Updated on

The "safe" star rating & the ONE star unlimited rating

After my scalable star rating and my ONE star rating, Here I am with more rating systems.

This time I will perform a 2x combo providing not one, but two star rating systems:

1. The "safe" star rating

2. The ONE star unlimited rating


The "safe" star rating

Everyone is talking about accessibility but no one is talking about safety which is a very important subject. Nowadays, everyone is using touch screens to navigate and as you know stars have spikes and they are dangerous for your fingers!

Each year, 20% of the kids between 8 years and 14 years get hurt by star spikes while navigating their phones. A recent study has claimed that 89% of the star rating on the web aren't safe!

Luckily, I am here for the rescue providing a "safe" star rating. No more dangerous spikes but smooth and rounded edges instead.

Similar to my first rating system, it's scalable and is made with pure CSS (no JS and no SVG).

Keep people safe by adopting this rating system.


The ONE star unlimited rating

The first version of the ONE star rating was good but it has a few drawbacks:

  • Only limited to a 0-5 rating
  • Not very intuitive

I have improved it and this version is now called the: ONE star unlimited rating.

Unlimited because it can work with any rating. Only one star holds all the ratings.

Let's start with the classical 0-5 rating:

A simple click on the star will increase the rating. More intuitive and also informative since I am showing the rating.

You can search in the code but you will find no JS logic in there. All is done with CSS.

Want more ratings? We simply add more inputs and we adjust the scaling step:

By simply adjusting 2 variables we can control both the size and the rating range while still having a unique star.

The first version can also be updated to include the rating:

What about <label>?

Someone said my code is missing labels. Guess what, you can easily add them without affecting the code.

I simply updated 2 rules where I am using the + selector (replacing + with + * + to consider the label), nothing more. The same can be done with all my star ratings and you don't have to touch the code of the others because I am not using the + selector. test it and see.


Now you have 4 different star rating systems. Notice that all of them use the same HTML code and I am changing only the CSS. You can easily switch to any star rating without too much complexity.

Is this my last star rating?

we will see

Top comments (18)

Collapse
 
afif profile image
Temani Afif • Edited

@inhuofficial @madsstoumann @link2twenty @lapstjup @siddharthshyniben

After a strange silence in the galaxy, two spaceships emerged and made a fatal attack at the same time. No one survived.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

I thought after the savage beat down of my last post this was over. It begs the question

why won't you die - mr creedy shooting V in V for Vendetta animated meme

I guess your ideas are bullet proof?

Collapse
 
afif profile image
Temani Afif

I'm Immortal!

Collapse
 
grahamthedev profile image
GrahamTheDev

Oh and I have to say thank you for providing safety to our younger generation, you are indeed correct we could have had someone's eyes out with our recklessness! 😋🤣

Collapse
 
siddharthshyniben profile image
Siddharth

Awesome man, you're really good at CSS.

Collapse
 
siddharthshyniben profile image
Siddharth

Each years 20% of the kids between 8 years and 14 years get hurt by star spikes while navigating their phones.

Can totally relate

Collapse
 
afif profile image
Temani Afif

yeah, no one can survive my 2x combo!

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Yup, I ended it Thursday, these are just the whimpers of a defeated foe 😋😉🤣

Thread Thread
 
afif profile image
Temani Afif

You ended nothing, you broke two asteroids with your small blaster while the real war is happening in another galaxy. Fix your navigation radar!

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
Sloan, the sloth mascot
Comment deleted
 
grahamthedev profile image
GrahamTheDev

haha 🤣🤣

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
grahamthedev profile image
GrahamTheDev • Edited

Oh ffs the site is very broken at the moment, 4 times trying to reply in the comments bit and it kept disappearing with an error - they all made it through though!

Thread Thread
 
afif profile image
Temani Afif

it's the effect of our war. The DEV site cannot handle it ... We need a bigger robust galaxy for the next one.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

I think you are right, maybe I shouldn't release my response just yet then 🤣

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Would using an input of type="range" be accepted? Although it may need a little bit of JS

Collapse
 
afif profile image
Temani Afif

Mads already explored that way: dev.to/madsstoumann/star-rating-us... unless you have a different idea ;)