Twinkle, twinkle Web Component star

May, 2021

---

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!

---