Twinkle, twinkle Web Component star

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



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!


Print Share Comment Cite Upload Translate
APA
Danny Engelman | Sciencx (2024-03-28T19:50:33+00:00) » Twinkle, twinkle Web Component star. Retrieved from https://www.scien.cx/2021/05/05/twinkle-twinkle-web-component-star/.
MLA
" » Twinkle, twinkle Web Component star." Danny Engelman | Sciencx - Wednesday May 5, 2021, https://www.scien.cx/2021/05/05/twinkle-twinkle-web-component-star/
HARVARD
Danny Engelman | Sciencx Wednesday May 5, 2021 » Twinkle, twinkle Web Component star., viewed 2024-03-28T19:50:33+00:00,<https://www.scien.cx/2021/05/05/twinkle-twinkle-web-component-star/>
VANCOUVER
Danny Engelman | Sciencx - » Twinkle, twinkle Web Component star. [Internet]. [Accessed 2024-03-28T19:50:33+00:00]. Available from: https://www.scien.cx/2021/05/05/twinkle-twinkle-web-component-star/
CHICAGO
" » Twinkle, twinkle Web Component star." Danny Engelman | Sciencx - Accessed 2024-03-28T19:50:33+00:00. https://www.scien.cx/2021/05/05/twinkle-twinkle-web-component-star/
IEEE
" » Twinkle, twinkle Web Component star." Danny Engelman | Sciencx [Online]. Available: https://www.scien.cx/2021/05/05/twinkle-twinkle-web-component-star/. [Accessed: 2024-03-28T19:50:33+00:00]
rf:citation
» Twinkle, twinkle Web Component star | Danny Engelman | Sciencx | https://www.scien.cx/2021/05/05/twinkle-twinkle-web-component-star/ | 2024-03-28T19:50:33+00:00
https://github.com/addpipe/simple-recorderjs-demo