DEV Community

loading...
Cover image for Mood Selector Component

Mood Selector Component

Mads Stoumann
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
・1 min read

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 😁

Discussion (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

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

Collapse
inhuofficial profile image
InHuOfficial

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

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

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