반짝반짝 웹컴포넌트 스타

당신이 무엇인지 어떻게 궁금해

종종 당신은 나를 너무 건조하게 유지

또는 쉬운 파이 차트*

반짝반짝 웹컴포넌트 스타

나는 당신이 무엇인지 배우고 있습니다

반응하기 위해 난 안녕 안녕

행복한 프론트엔드가 되겠습니다

반짝반짝 웹컴포넌트 스타

이제 나는 당신이 얼마나 위대한지 압니다.

(*) Dev.to 게시물 참조: What web technologies are required to draw a pie-chart in 2021

웹 구성 요소 학습

저는 StackOverflow에 많은 질문을 던지며 웹 컴포넌트를 배웠습니다.

이제 웹 구성 요소에 대해 점점 더 많이 배웁니다.
Stack Overflow에 대한 질문에 답변합니다.

작년에 SVG 주제에서 누군가 반성점 평가를 수행하는 방법을 물었습니다.



많은 사람들처럼 저는 반성 아이콘을 그리는 것부터 시작했습니다.

그런 다음 별 5개를 모두 그리는 것이 더 쉽다는 것을 깨달았습니다.
녹색 전경을 잘라냅니다.

그러면 녹색 전경 뒤의 금색 직사각형이 값을 나타냅니다.

DRY(반복하지 마세요)

SVG 및 웹 구성 요소의 작동 방식에 대한 전체 설명은 다음을 참조하세요.
https://stackoverflow.com/questions/65366162/is-it-possible-to-only-show-half-of-a-svg-icon

<star-rating> 웹 구성 요소

그런 다음 웹 구성 요소가 해야 할 일은 보이지 않는 사각형의 두 배를 그려서 "반쪽 별"위의 마우스 위치를 캡처하는 것입니다.

완전히 구성 가능한 웹 구성 요소:

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

그런 다음 22줄의 바닐라 JavaScript 코드로 만들 수 있습니다.

코드를 가지고 놀고, 조정하고, 부수고, 다시 고치고, 향상시키고, 배우십시오!