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 😜

Collapse
 
luigifish profile image
Luigi Pesce

Really nice! 👏🏻

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
 
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
 
deep_dev profile image
SOUMYADEEP GHOSH

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
 
moopet profile image
Ben Sinclair

Very nice.

Collapse
 
mardeg profile image
Mardeg

⭐⭐⭐⭐☆

Collapse
 
epic-win profile image
EPIC WIN Productions Media

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

Collapse
 
ashish567 profile image
Ashish567

🤞