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?
Top comments (18)
@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.
I thought after the savage beat down of my last post this was over. It begs the question
I guess your ideas are bullet proof?
I'm Immortal!
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! 😋🤣
Awesome man, you're really good at CSS.
Can totally relate
yeah, no one can survive my 2x combo!
Yup, I ended it Thursday, these are just the whimpers of a defeated foe 😋😉🤣
You ended nothing, you broke two asteroids with your small blaster while the real war is happening in another galaxy. Fix your navigation radar!
haha 🤣🤣
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!
it's the effect of our war. The DEV site cannot handle it ... We need a bigger robust galaxy for the next one.
I think you are right, maybe I shouldn't release my response just yet then 🤣
Would using an input of type="range" be accepted? Although it may need a little bit of JS
Mads already explored that way: dev.to/madsstoumann/star-rating-us... unless you have a different idea ;)