Como criar Rating Component
Introdução
Neste tutorial, vou mostrar como criar um Rating Component utilizando apenas html, css e Javascritp.
O Tutorial será breve e de forma rápida não será necessário o uso de nenhum tipo de biblioteca externa, será apenas html e css .
Primeiro passo você deverá criar a estrutura da página, para isso crie um arquivo html contendo o código que mostro abaixo:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Rating Component</title></head><body></body></html>
Logo após crio um componente Rating :
<div class="rating"> <div class="title"> <span>★</span> <span class="label">Rating Component</span> </div> <div class="star-container"> <span class="star" data-value="1">★</span> <span class="star" data-value="2">★</span> <span class="star" data-value="3">★</span> <span class="star" data-value="4">★</span> <span class="star" data-value="5">★</span> </div> <span id="ratingScore" class="score-label">Score: 0 star(s)</span> </div>
Uma breve explicação do código acima, para definir as estrelas adicionei elas ao componente <span> com a classe star e o atributo data-value para identificar o valor de cada estrela.
Depois adiciono o css responsável pela estilização da página :
<style> body { width: 100vw; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #111111; } .rating { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; border-radius: 0.5rem; border: 1px solid #b6b7f6; background-color: #141920; color: #b6b7f6; } .star-container { display: flex; justify-content: center; gap: 0.8rem; } .title { display: flex; justify-content: center; align-items: baseline; gap: 0.5rem; align-self: flex-start; margin-bottom: 0.5rem; } .title span { font-size: 2.25rem; line-height: 2.25rem; color: #82be0f; } .title .label { font-weight: 900; font-size: 1.5rem; line-height: 1.5rem; text-align: end; } .star { padding: 1rem; font-size: 2rem; line-height: 2rem; cursor: pointer; color: #b6b7f6; transition: color 0.2s, background-color 0.2s; border: 1px solid #b6b7f6; border-radius: 0.5rem; box-sizing: border-box; } .star:hover, .star.hover { background-color: #82be0f; color: white; border-color: #82be0f; } .star.selected { background-color: #82be0f; color: white; border-color: #82be0f; } .score-label { text-align: center; margin-top: 10px; font-size: 20px; } </style>
No código acima, utilizei a tag <style> para adicionar o CSS diretamente no arquivo HTML. Abaixo deixo uma breve explicação das principais partes do CSS:
- body: Nesta tag adicionei as propriedades para centralizar o conteúdo na tela e definir o fundo e o alinhamento dos componentes.
Por ultimo adiciono o script responsável por adicionar a animação ao Rating Component:
const stars = document.querySelectorAll(".star");let ratingValue = 0;const ratingScore = document.getElementById("ratingScore");function highlightStars(value) { stars.forEach((star) => { if (star.dataset.value <= value) { star.classList.add("selected"); } else { star.classList.remove("selected"); } });}stars.forEach((star) => { star.addEventListener("click", () => { ratingValue = star.dataset.value; highlightStars(ratingValue); ratingScore.textContent = `Score: ${ratingValue} star(s)`; }); star.addEventListener("mouseover", () => { highlightStars(star.dataset.value); }); star.addEventListener("mouseout", () => { highlightStars(ratingValue); });});
- 1ª: Defino as variáveis que vão armazenar as tags que contém as estrelas e a label onde vou inserir a informação do total da votação.
- 2ª: Adiciono os eventos (
click) , (mouseover) , (mouseout) para capturar os eventos que usuário aciona ao interagir com as tags de votação .
Deixo aqui um vídeo curto do processo e de como ficou o Rating Component:
Conclusão
Com esses simples passos, você consegue de forma rápida criar um Rating Component usando apenas HTML e CSS. Caso necessite você pode personalizar a animação e a estilização conforme a sua necessidade.
Código fonte do tutorial do Rating Component:
