DEV Community

Cover image for Single HTML Element Star Rating Component

Single HTML Element Star Rating Component

Alvaro Montoro on January 23, 2025

In the past, creating custom components required complex combinations of HTML, CSS, and JavaScript. However, the advancement of CSS in recent years...
Collapse
 
link2twenty profile image
Andrew Bone • Edited

Nice! Almost 4 years ago a bunch of us did a silly set of posts making star rating components. We got a little carried away with it but it was fun.

@grahamthedev @madsstoumann @afif can you believe it was that long ago?!

Collapse
 
madsstoumann profile image
Mads Stoumann • Edited

Damn, time flies!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Maybe time to do something like that again? 🤓

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Oh you don't want a piece of this :-) hahah.

Time just flies, shows how little I have written lately as that felt quite recent!

Thread Thread
 
afif profile image
Temani Afif

That time when my stellar ideas were killing everyone! 😈

Thread Thread
 
grahamthedev profile image
GrahamTheDev

hmmm, I think you and I remember things differently 😜

Thread Thread
 
afif profile image
Temani Afif

No way! Alzheimer at your age?!! .. poor you 😧🤪

 
madsstoumann profile image
Mads Stoumann

I’m in!

Thread Thread
 
link2twenty profile image
Andrew Bone

So what are we making?

Thread Thread
 
madsstoumann profile image
Mads Stoumann

I did the Solar System, Fibonaccis Spiral and the Periodic Table in CSS last year, and have been struggling coming up with something as recognizable (and fun!) as these — any ideas?

Inspired by my savings in the Lidl-app, I did this many months ago: browser.style/ui/progress-meter/

I'm sure Temani can do it with less or no JavaScript ;-)

Thread Thread
 
moopet profile image
Ben Sinclair

That's a widget to display things... why does it use inputs behind the scenes when you can't click it? I am confuse.

Thread Thread
 
madsstoumann profile image
Mads Stoumann

Consider it an unfinished sketch, that’s why I mention it here — not sure if it should be interactive? Or a range-slider with custom ticks?

Thread Thread
 
grahamthedev profile image
GrahamTheDev

A, progress meter could be good, but leave it as wide as that rather than a particular type (ultimate progress meter).

Saying that, the only thing anybody builds nowadays is AI chatbots, so how about we just do a competition around "chat" (yet again, as wide as possible so we get the silly stuff again!)? 😁

Collapse
 
dannyengelman profile image
Danny Engelman

I missed that party.

My <star-rating> was 22 lines of JavaScript in 2021

dev.to/dannyengelman/twinkle-twink...

Collapse
 
link2twenty profile image
Andrew Bone

This predates us by a month 😮

Collapse
 
grahamthedev profile image
GrahamTheDev

I consider you an honorary part of the competition now I have seen that...and you lost just the same as everyone else! 😱🤣💗

Thread Thread
 
dannyengelman profile image
Danny Engelman

Story of my internet life:
I do things long before anyone else, and all I get out of it is the ability to say I did something long before everyone else.

I once had the domain name photomatchmaker.com. It was supposed to be a site where you could rate, like, or rank photographs.

Eight years later, I emailed Mark... but never got a reply.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Well now you are part of the competition you get the same level of response I would give everyone else:

Just because you were first does not mean your submission sucked any less than any of the others, 😱🤣💗

Collapse
 
luigifish profile image
Luigi Pesce

Really nice! 👏🏻

Collapse
 
jeffrey_tackett_5ef1a0bdf profile image
Jeffrey Tackett

None of the star rating components allow for 0 stars, this reduces the effectiveness of such a rating as you will always have a bias to a favorable rating. This control might have a smaller one than most, but it still has a bias. I want to see a rating system with 5 solid stars and 1 hollow one. It would be a little more work, since the first hollow star would need to not allow ½ highlighting, and most likely you wouldn't want it to be highlighted when there is a value other than 0. So, the best solution for this problem is to have that case handled differently, most likely with JavaScript.

Collapse
 
thecultsoft profile image
CiltSoft

Image description
🎉 True Happiness for Developers!
There’s no better feeling than seeing your code run flawlessly on the first attempt! 🙌 At CultSoft, we celebrate these little wins that make the coding journey worthwhile.
💻 Let’s continue to code, debug, and innovate together, one successful execution at a time!
What’s your happiest coding moment? Share it in the comments below! 😊

CultSoft #CodingHappiness #DeveloperLife #NoErrors #TechCommunity

Collapse
 
pengeszikra profile image
Peter Vivo

As final step may upgrade to a WebComponent.

Collapse
 
wasif_ali_d2a4d12bbaca251 profile image
Wasif Ali • Edited

All post is great. Final step of hours of operation amazing.

Collapse
 
moopet profile image
Ben Sinclair

Very nice.

Collapse
 
ashish567 profile image
Ashish567

🤞

Collapse
 
epic-win profile image
EPIC WIN Productions Media

noiice!! VERY cool semantic CSS-first implementation! I Approve. 💯