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 • Edited

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

😂

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

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 • Edited

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