DEV Community

loading...
Cover image for The "safe" star rating & the ONE star unlimited rating

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

Temani Afif
Another Dev guy who love hacking with CSS
・2 min read

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 years 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 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 holding all kind of rating.

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 rating? 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 rating 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

Discussion (18)

Collapse
afif profile image
Temani Afif Author • 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
inhuofficial profile image
InHuOfficial • 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 Author

I'm Immortal!

Collapse
inhuofficial profile image
InHuOfficial

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
khajin1 profile image
evalPenny • Edited

Looks like the war is over. Right?

Collapse
afif profile image
Temani Afif Author

yeah, no one can survive my 2x combo!

Collapse
inhuofficial profile image
InHuOfficial • Edited

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

Thread Thread
afif profile image
Temani Afif Author

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
inhuofficial profile image
InHuOfficial

haha 🤣🤣

Thread Thread
Sloan, the sloth mascot
Comment deleted
inhuofficial profile image
InHuOfficial • 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 Author

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
inhuofficial profile image
InHuOfficial

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

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
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 Author

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