Twinkle, twinkle, Web Component star
How I wonder what you are
often you keep me so DRY
or you chart an easy pie*
Twinkle, twinkle, Web Component star
I am learning what you are
To React I say bye, bye
I will be a happy Front-End guy
Twinkle, twinkle Web Component star
Now I know how great you are
(*) See Dev.to post: What web technologies are required to draw a pie-chart in 2021
Learning Web Components
I learned Web Components by asking loads of questions on StackOverflow.
Now I learn more and more about Web Components,
by answering questions on Stack Overflow.
Last year, in the SVG topic, someone asked how to do a half-star Rating
Like many I started by drawing half star icons.
then realised it is easier to draw all 5 stars
by cutting them out the green foreground.A gold rectangle behind the green foreground then indicates the value.
DRY (Don't Repeat Yourself)
For full explanation on how the SVG and Web Component work see:
https://stackoverflow.com/questions/65366162/is-it-possible-to-only-show-half-of-a-svg-icon
A <star-rating> Web Component
All the Web Component then has to do is draw double the amount of invisible rectangles to capture the mouse position over the "half-stars".
A fully configurable <star-rating> Web Component:
<star-rating stars=5 rating="3.5"
bgcolor="green" nocolor="grey" color="gold"></star-rating>
<star-rating stars=7 rating="50%"
bgcolor="rebeccapurple" nocolor="beige" color="goldenrod"></star-rating>
Can then be created with 22 lines vanilla JavaScript code:
Play with the code, tweak it, break it, mend it again, enhance it, learn!
Top comments (0)