Calificacion de usuario con estrellas html y javascript

Este sencillo guion Html mas javascript permite colocar la calificación de un usuario, vendedor o

prestador de bienes y servicios mediante la elección de 1 - 5 estrellas.

  • Estructura HTML: El selector de calificación está compuesto por cinco iconos de estrella de Font Awesome, cada uno con un atributo data-rating que indica su valor (1-5).
  • Estilos CSS: Las estrellas tienen un color gris por defecto y cambian a dorado cuando están activas.

  • Funcionalidad JavaScript: La interactividad se logra mediante tres eventos principales: a) Clic en una estrella:

    • Cuando el usuario hace clic en una estrella, se captura el valor de data-rating, se guarda en un campo oculto (userRatingInput) y se actualiza la visualización de las estrellas. b) Pasar el mouse sobre las estrellas

    Al pasar el mouse sobre una estrella, se muestra visualmente cómo quedaría la calificación si se seleccionara esa estrella. c) Quitar el mouse de las estrellas

    Cuando el mouse sale del área de las estrellas, se restaura la visualización a la calificación actualmente seleccionada.

    <!DOCTYPE html>

    <html lang="es">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro de Usuario</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

    <style>
     .star-rating {
     font-size: 0;
     }
     .star-rating .fa-star {
     font-size: 1.5rem;
     color: #ddd;
     cursor: pointer;
     }
     .star-rating .fa-star.active {
     color: #ffd700;
     }
     </style>
    </head>

    <div class="row">
                      <div class="col-4">
                        <div class="mostrar fs-3"  for="empresarioCalificacion">
                          Calificaci&oacute;n
                        </div>
                      </div>
                      <div class="col">
        <div class="mb-3">
                          <div class="star-rating" id="starRating">
                    <i class="fas fa-star" data-rating="1"></i>
     <i class="fas fa-star" data-rating="2"></i>
                            <i class="fas fa-star" data-rating="3"></i>
                            <i class="fas fa-star" data-rating="4"></i>
                            <i class="fas fa-star" data-rating="5"></i>
                          </div>
                          <input type="hidden" id="empresarioCalificacion" name="empresarioCalificacion" >
                        </div>
                      </div>

    <script>

    document.addEventListener('DOMContentLoaded', function() {
     const starRating = document.getElementById('starRating');
     const stars = starRating.getElementsByClassName('fa-star');
     const userRatingInput = document.getElementById('empresarioCalificacion'); /* Inicializa la calificacion con el valor contenido en Empresarios. */
     if ('<%=accion%>' == "EDITAR")
     {
     updateStars(userRatingInput.value);
     } starRating.addEventListener('click', function(e) {
     if (e.target.classList.contains('fa-star')) {
     const rating = e.target.getAttribute('data-rating');
     userRatingInput.value = rating;
     updateStars(rating);
     }
     }); starRating.addEventListener('mouseover', function(e) {
     if (e.target.classList.contains('fa-star')) {
     const rating = e.target.getAttribute('data-rating');
     updateStars(rating);
     }
     }); starRating.addEventListener('mouseout', function() {
     updateStars(userRatingInput.value);
     });

                function updateStars(rating) {
    for (let i = 0; i < stars.length; i++) {
                        stars[i].classList.toggle('active', i < rating);
    }
                }

            });

    Comentarios

    Publicar un comentario

    Entradas populares