Una Simple Técnica de JavaScript Para el Llenado De Calificaciones Con Estrellas

En este breve tutorial, describimos un método simple, pero útil para el llenado de calificaciones con estrellas usando HTML, CSS y JavaScript. Aquí es lo que vamos a construir:

Apropiación de los Iconos de Estrellas

Para nuestro ejemplo, necesitaremos los siguientes iconos estrellas dos:

Con esto en mente, vamos a incluir primero la biblioteca popular  Font Awesome en nuestro proyecto:

El Marcado

Con respecto a la marca, tenemos una tabla con filas de seis. La primera fila contiene las cabeceras de la tabla th, mientras que las otras cinco filas más información. Obviamente, en sus propios proyectos, estas filas podrían representar algo diferente.

Aquí está el código HTML requerido:

1

<table>

2

 <thead>

3

    <tr>

4

      <th>Hotel</th>

5

      <th>Rating</th>

6

    </tr>

7

  </thead>

8

  <tbody>

9

    <tr class="hotel_a">

10

      <td>Hotel A</td>

11

      <td>

12

        <div class="stars-outer">

13

          <div class="stars-inner"></div>

14

        </div>

15

      </td>

16

    </tr>

17

    <tr class="hotel_b">

18

      <td>Hotel B</td>

19

      <td>

20

        <div class="stars-outer">

21

          <div class="stars-inner"></div>

22

        </div>

23

      </td>

24

    </tr>

25

26

    <!-- 3 more rows here -->

27

28

  </tbody>

29

</table>

Lo más importante es notar el marcado que se incluye en el segundo td de cada fila:

1

<div class="stars-outer"

2

  <div class="stars-inner"></div>

3

</div>

Este es el marcado que tenemos estilo para visualizar la clasificación por estrellas de nuestros hoteles.

Hasta ahora, nuestro proyecto tiene este aspecto:

El CSS

En este punto, vamos a agregar algunos CSS básico a la tabla, así:

1

table {

2

  margin: 0 auto;

3

  text-align: center;

4

  border-collapse: collapse;

5

  border: 1px solid #d4d4d4;

6

  font-size: 20px;

7

  background: #fff;

8

}

9

10

table th, 

11

table tr:nth-child(2n+2) {

12

  background: #e7e7e7;

13

}

14

15

table th, 

16

table td {

17

  padding: 20px 50px;

18

}

19

20

table th {

21

  border-bottom: 1px solid #d4d4d4;

22

}     

El paso siguiente y más importante es definir los estilos para los elementos .stars-outer y .stars-inner. Aquí está el CSS necesario:

1

.stars-outer {

2

  display: inline-block;

3

  position: relative;

4

  font-family: FontAwesome;

5

}

6

7

.stars-outer::before {

8

  content: "\f006 \f006 \f006 \f006 \f006";

9

}

10

11

.stars-inner {

12

  position: absolute;

13

  top: 0;

14

  left: 0;

15

  white-space: nowrap;

16

  overflow: hidden;

17

  width: 0;

18

}

19

20

.stars-inner::before {

21

  content: "\f005 \f005 \f005 \f005 \f005";

22

  color: #f8ce0b;

23

}

Repasemos algunas cosas en este momento.

Nos carga los iconos impresionante fuente deseados por CSS. Este es un proceso de dos pasos. En primer lugar, aplicamos font-family: FontAwesome al elemento primario superior (es decir .stars-outer). A continuación, añadimos los iconos a los pseudo-elementos objetivo estableciendo sus caracteres unicode.

Aquí es el unicode para el primer icono:

Y aquí está el unicode para la segunda:

Otra cosa a notar es que cada uno de nuestros iconos debe aparecer cinco veces dentro de una fila de tabla. Por esta razón, ponen hacia fuera como este:

1

.stars-outer::before {

2

  content: "\f006 \f006 \f006 \f006 \f006";

3

}

4

5

.stars-inner::before {

6

  content: "\f005 \f005 \f005 \f005 \f005";

7

}

Con CSS en su lugar, el proyecto se ve como sigue:

Estrellas Vacías

Os habréis fijado que aparece sólo en el primer icono. ¿Pero por qué? Es porque antes hemos definido esta regla CSS:

1

.stars-inner {

2

  width: 0;

3

}

Quitando esa regla el segundo ícono encima de la primera de ellas, como este:

Y si tuviéramos que hacer los elementos .stars-inner 50% amplia, nos revelaría la mitad de ellos:

De todos modos, inicialmente el width del elemento .stars-inner debe ser 0 y dinámicamente a actualizarlo según el valor de la calificación del hotel correspondiente. Vamos a ver lo que sucede en la siguiente sección.

El JavaScript

Vamos a suponer que nuestros hoteles tienen los siguientes valores de calificación:

1

const ratings = {

2

  hotel_a : 2.8,

3

  hotel_b : 3.3,

4

  hotel_c : 1.9,

5

  hotel_d : 4.3,

6

  hotel_e : 4.74

7

};

Tenga en cuenta que, por simplicidad, especificamos los valores antes mencionados en el código (entre 0 y 5). En un proyecto real, estos pueden ser obtenidos a través de una petición AJAX. Además, en el mundo real, debemos hacer algunas comprobaciones para asegurarse de los valores derivados son dentro de la 0 - gama 5.

Así que ahora que ya tenemos las clasificaciones, realizamos las siguientes acciones:

1. Nos del lazo a través del objeto de ratings. Observe que el nombre de cada clave del objeto coincide con el nombre de clase de una fila de tabla. De esta manera, podemos vincular una clave de objeto a un hotel.
2. Para cada clave del objeto, tomar su valor y convertirlo en un valor porcentual.
3. Nos ronda el valor ya mencionado a los 10 más cercano. Esto significa que el valor resultante es 0%, 10%, 20%, 30%, etcetera. Esto es importante porque nos permite crear estrellas medio limpios. Por ejemplo, un valor de 50% indica que dos estrellas están llenos.
4. Fijamos el width del elemento objetivo .stars-inner igual al valor redondeado.

De acuerdo con lo que hemos descrito anteriormente, este es el código asociado:

1

const starTotal = 5;

2

3

for(const rating in ratings) {  

4

  // 2

5

  const starPercentage = (ratings[rating] / starTotal) * 100;

6

  // 3

7

  const starPercentageRounded = `${(Math.round(starPercentage / 10) * 10)}%`;

8

  // 4

9

  document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded; 

10

}

La versión final de nuestro proyecto es el siguiente:

Compatibilidad con Navegadores

Esta demo ha sido probada en varios dispositivos y funciona bien. Sin embargo, si usted encuentra cualquier problema, hágamelo saber en los comentarios. Además, como posiblemente has notado, utilizamos Babel para compilar nuestro código ES6 hasta ES5.

Conclusión

En este breve tutorial, cubrimos un método para llenar la clasificación por estrellas. Que ha disfrutado de trabajar hacia el resultado final, incluso podría tomar ventaja de esta técnica en un próximo proyecto o mejorar para sus propias necesidades.

Como siempre, si usted tiene cualesquiera preguntas, compártalas con nosotros en los comentarios!