{"id":575,"date":"2024-09-26T23:28:21","date_gmt":"2024-09-27T02:28:21","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=575"},"modified":"2024-09-28T23:29:11","modified_gmt":"2024-09-29T02:29:11","slug":"como-criar-rating-component","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2024\/09\/26\/como-criar-rating-component\/","title":{"rendered":"Como criar Rating Component"},"content":{"rendered":"

<\/h1>\n
\"Rating
Rating Component<\/figcaption><\/figure>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Introdu\u00e7\u00e3o<\/h2>\n

Neste tutorial,\u00a0 vou mostrar como criar um Rating Component utilizando apenas html, css e Javascritp.\u00a0<\/span><\/p>\n

O Tutorial ser\u00e1 breve e de forma r\u00e1pida n\u00e3o ser\u00e1 necess\u00e1rio o uso de nenhum tipo de biblioteca externa, ser\u00e1 apenas html e css\u00a0.<\/span><\/p>\n

\n
Com este componente voc\u00ea pode criar um sistema de vota\u00e7\u00e3o de forma f\u00e1cil e <\/span>implementar uma funcionalidade onde o usu\u00e1rio pode clicar nas estrelas para avaliar e\u00a0 processar o valor da <\/span>avalia\u00e7\u00e3o\u00a0<\/span><\/div>\n<\/div>\n

 <\/p>\n

 <\/p>\n

Primeiro passo voc\u00ea dever\u00e1 criar a estrutura da p\u00e1gina, para isso crie um arquivo html contendo\u00a0 o c\u00f3digo que mostro abaixo:<\/span><\/strong><\/p>\n

\n
\n
<!DOCTYPE html><\/code><\/div>\n
<html lang=\"en\"><\/code><\/div>\n
<head><\/code><\/div>\n
\u00a0 \u00a0 <meta charset=\"UTF-8\"><\/code><\/div>\n
\u00a0 \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/div>\n
\u00a0 \u00a0 <title> Rating Component<\/code><\/title><\/code><\/div>\n
<\/head><\/code><\/div>\n
<body><\/code><\/div>\n
<\/body><\/code><\/div>\n
<\/html><\/code><\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

Logo ap\u00f3s crio um componente Rating :<\/span><\/strong><\/p>\n

 <\/p>\n

\n
<div class=\"rating\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"title\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span>\u2605<\/span><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"label\">Rating Component<\/span><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"star-container\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"star\" data-value=\"1\">\u2605<\/span><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"star\" data-value=\"2\">\u2605<\/span><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"star\" data-value=\"3\">\u2605<\/span><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"star\" data-value=\"4\">\u2605<\/span><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"star\" data-value=\"5\">\u2605<\/span><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <span id=\"ratingScore\" class=\"score-label\">Score: 0 star(s)<\/span><\/code><\/div>\n
\u00a0 \u00a0 <\/div><\/code><\/div>\n<\/div>\n

 <\/p>\n

 <\/p>\n

Uma breve explica\u00e7\u00e3o do c\u00f3digo acima,\u00a0 para definir as estrelas adicionei elas ao componente\u00a0 <span> com a classe star e o atributo data-value para identificar o valor de cada estrela.<\/span><\/p>\n

 <\/p>\n

 <\/p>\n

Depois adiciono o css respons\u00e1vel pela estiliza\u00e7\u00e3o da p\u00e1gina :<\/span><\/strong><\/p>\n

\n
\n
\n
\n
\n

<\/code><\/code><\/p>\n

\n
\u00a0 \u00a0 <style><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 body {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 100vw;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 min-height: 100vh;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 align-items: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background-color: #111111;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .rating {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 flex-direction: column;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 gap: 0.5rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 padding: 1rem 2rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-radius: 0.5rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border: 1px solid #b6b7f6;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background-color: #141920;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: #b6b7f6;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .star-container {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 gap: 0.8rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .title {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 align-items: baseline;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 gap: 0.5rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 align-self: flex-start;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 margin-bottom: 0.5rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .title span {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size: 2.25rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 line-height: 2.25rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: #82be0f;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .title .label {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-weight: 900;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size: 1.5rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 line-height: 1.5rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 text-align: end;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .star {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 padding: 1rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size: 2rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 line-height: 2rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 cursor: pointer;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: #b6b7f6;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transition: color 0.2s, background-color 0.2s;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border: 1px solid #b6b7f6;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-radius: 0.5rem;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 box-sizing: border-box;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .star:hover,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .star.hover {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background-color: #82be0f;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: white;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-color: #82be0f;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .star.selected {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background-color: #82be0f;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: white;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-color: #82be0f;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .score-label {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 text-align: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 margin-top: 10px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size: 20px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 <\/style><\/code><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

No c\u00f3digo acima, utilizei a tag <style><\/code> para adicionar o CSS diretamente no arquivo HTML.\u00a0 Abaixo deixo uma breve explica\u00e7\u00e3o das principais partes do CSS:<\/span><\/p>\n

    \n
  • body<\/strong>: Nesta tag adicionei as propriedades para centralizar o conte\u00fado na tela e definir o fundo e o alinhamento dos componentes.<\/span><\/li>\n<\/ul>\n

     <\/p>\n

    Por ultimo adiciono o script respons\u00e1vel por adicionar a anima\u00e7\u00e3o ao Rating Component:<\/span><\/strong><\/p>\n

     <\/p>\n

    \n
    \n
    \n
    const stars = document.querySelectorAll(\".star\");<\/code><\/div>\n
    let ratingValue = 0;<\/code><\/div>\n
    const ratingScore = document.getElementById(\"ratingScore\");<\/code><\/div>\n
    function highlightStars(value) {<\/code><\/div>\n
    \u00a0 stars.forEach((star) => {<\/code><\/div>\n
    \u00a0 \u00a0 if (star.dataset.value <= value) {<\/code><\/div>\n
    \u00a0 \u00a0 \u00a0 star.classList.add(\"selected\");<\/code><\/div>\n
    \u00a0 \u00a0 } else {<\/code><\/div>\n
    \u00a0 \u00a0 \u00a0 star.classList.remove(\"selected\");<\/code><\/div>\n
    \u00a0 \u00a0 }<\/code><\/div>\n
    \u00a0 });<\/code><\/div>\n
    }<\/code><\/div>\n
    stars.forEach((star) => {<\/code><\/div>\n
    \u00a0 star.addEventListener(\"click\", () => {<\/code><\/div>\n
    \u00a0 \u00a0 ratingValue = star.dataset.value;<\/code><\/div>\n
    \u00a0 \u00a0 highlightStars(ratingValue);<\/code><\/div>\n
    \u00a0 \u00a0 ratingScore.textContent = `Score: ${ratingValue} star(s)`;<\/code><\/div>\n
    \u00a0 });<\/code><\/div>\n
    \u00a0 star.addEventListener(\"mouseover\", () => {<\/code><\/div>\n
    \u00a0 \u00a0 highlightStars(star.dataset.value);<\/code><\/div>\n
    \u00a0 });<\/code><\/div>\n
    \u00a0 star.addEventListener(\"mouseout\", () => {<\/code><\/div>\n
    \u00a0 \u00a0 highlightStars(ratingValue);<\/code><\/div>\n
    \u00a0 });<\/code><\/div>\n
    });<\/code><\/div>\n<\/div>\n

    <\/code><\/p>\n<\/div>\n<\/div>\n

     <\/p>\n

    \n
    No c\u00f3digo acima, usei o JavaScript\u00a0 para capturar o clique do usu\u00e1rio\u00a0 e exibir as estrelas que o usu\u00e1rio selecionou e eventualmente armazenei o valor da sele\u00e7\u00e3o do usu\u00e1rio para uma vari\u00e1vel, para depois exibir a informa\u00e7\u00e3o na label.<\/span><\/div>\n<\/div>\n
      \n
    • 1\u00aa<\/strong>: Defino as vari\u00e1veis que v\u00e3o armazenar as tags que cont\u00e9m as estrelas e a label onde vou inserir a informa\u00e7\u00e3o do total da vota\u00e7\u00e3o.<\/span><\/li>\n
    • 2\u00aa<\/strong>: Adiciono os eventos (click<\/code>) , (mouseover<\/code>) , (mouseout<\/code>) para capturar os eventos\u00a0 que usu\u00e1rio aciona ao interagir com as tags de vota\u00e7\u00e3o .<\/span><\/li>\n<\/ul>\n

       <\/p>\n

      Deixo aqui um v\u00eddeo curto do processo e de como ficou o Rating Component:<\/span><\/strong><\/p>\n

       <\/p>\n