DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Mood Selector Component
Mads Stoumann
Mads Stoumann

Posted on

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 😁

Top comments (10)

Collapse
afif profile image
Temani Afif

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

Collapse
madsstoumann profile image
Mads Stoumann Author • Edited on

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

Collapse
grahamthedev profile image
GrahamTheDev

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

Thread Thread
madsstoumann profile image
Mads Stoumann Author

πŸ˜‚

Collapse
link2twenty profile image
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 πŸ˜‰

Collapse
madsstoumann profile image
Mads Stoumann Author

Only if I can use JavaScript ☺️

Collapse
link2twenty profile image
Andrew Bone

🀐

Thread Thread
grahamthedev profile image
GrahamTheDev

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

Collapse
siddharthshyniben profile image
Siddharth

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

Collapse
madsstoumann profile image
Mads Stoumann Author • Edited on

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

🌚 Life is too short to browse without dark mode