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!