Mood Selector Component

Throughout this week, the “Star (rating) Wars” have run here on dev.to.

With proposals by @inhuofficial, @lapstjup, @link2twenty , @afif, @siddharthshyniben and possisble others – dev.to has been plastered in “Star Rating” components!

My proposal was a single input solution, allowing for any number of stars, also half- and quarter-stars – without adding extra markup.

All the other solutions use groups of <input type="radio">-tags, so I decided to do a component with just that, but not with stars.

Instead, pick your mood after these dramatic days – no JavaScript required:

Thanks for reading 😁

Comments

[Temani Afif]

So I understand from this that you are already leaving the battle??

[Mads Stoumann]

Didn't I win? LOL! I think the world has seen enough “Star Ratings” for now!

[GrahamTheDev]

You are going to need some aloe Vera for that burn. Ouch. Temani being a savage today I see?

[Mads Stoumann]

😂

[Andrew Bone]

Now if you could do your range version and have one face that animated as it got happier and sadder that would be insane 😉

[Mads Stoumann]

Only if I can use JavaScript ☺️

[Andrew Bone]

🤐

[GrahamTheDev]

I wish people would stop stealing my ideas before I have time to create them...back to the drawing board again! 😜🤣

[Siddharth]

Nice one, but it's kinda hard to see which one is selected. You could also build a high contrast version

[Mads Stoumann]

Sure! I only changed the hue, now I change saturation and lightness as well.