DEV Community

Cover image for Twinkle, twinkle Web Component star
Danny Engelman
Danny Engelman

Posted on


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

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 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:

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>
Enter fullscreen mode Exit fullscreen mode

<star-rating stars=7 rating="50%"
             bgcolor="rebeccapurple" nocolor="beige" color="goldenrod"></star-rating>
Enter fullscreen mode Exit fullscreen mode

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)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.