Una semplice tecnica JavaScript per il riempimento di valutazioni di stelle

In questo breve tutorial, descriveremo un metodo semplice ma utile per il riempimento delle valutazioni a stelle usando HTML, CSS e JavaScript. Ecco cosa stiamo andando a costruire:

Afferrando le icone delle stelle

Per il nostro esempio, avremo bisogno delle seguenti icone a due stelle:

Con questo in mente, includiamo innanzitutto la famosa libreria Font Awesome nel nostro progetto:

Il markup

Per quanto riguarda il markup, abbiamo bisogno di un tavolo con sei righe. La prima riga contiene le intestazioni della tabella esimo, mentre le altre cinque file riportano i dettagli dell'hotel. Ovviamente, nei tuoi progetti, queste righe potrebbero rappresentare qualcosa di diverso.

Ecco l'HTML richiesto:

   Hotel  Valutazione  
 
   Hotel A    
 
  
  Hotel B

Hotel	Valutazione
Hotel A
Hotel B

Ancora più importante, nota il markup che è incluso nel secondo TD di ogni riga:

Questo è il markup che dobbiamo stilare per visualizzare le valutazioni a stelle dei nostri hotel.

Finora, il nostro progetto si presenta così:

Il CSS

A questo punto, aggiungiamo alcuni CSS di base alla tabella, in questo modo:

table margin: 0 auto; allineamento del testo: centro; border-collapse: collapse; border: 1px solid # d4d4d4; font-size: 20px; sfondo: #fff;  table th, table tr: nth-child (2n + 2) background: # e7e7e7;  tabella th, table td padding: 20px 50px;  table th border-bottom: 1px solid # d4d4d4;

Il prossimo e più importante passo è definire gli stili per il .stelle-esterno e .stelle-interni elementi. Ecco il CSS necessario:

.stars-outer display: inline-block; posizione: relativa; font-family: FontAwesome;  .stars-outer :: before content: "\ f006 \ f006 \ f006 \ f006 \ f006";  .stars-inner position: absolute; inizio: 0; a sinistra: 0; white-space: nowrap; overflow: nascosto; larghezza: 0;  .stars-inner :: before content: "\ f005 \ f005 \ f005 \ f005 \ f005"; colore: # f8ce0b;

Andiamo su alcune cose a questo punto.

Carichiamo le icone desiderate Font Awesome tramite CSS. Questo è un processo in due fasi. In primo luogo, applichiamo font-family: FontAwesome all'elemento superiore genitore (es. .stelle-esterno). Successivamente, aggiungiamo le icone agli pseudo-elementi di destinazione impostando i loro caratteri unicode.

Ecco l'unicode per la prima icona:

Ed ecco l'unicode per il secondo:

Un'altra cosa da notare è che ciascuna delle nostre icone dovrebbe apparire cinque volte all'interno di una riga della tabella. Per questo motivo, li disponiamo in questo modo:

.stars-outer :: before content: "\ f006 \ f006 \ f006 \ f006 \ f006";  .stars-inner :: before content: "\ f005 \ f005 \ f005 \ f005 \ f005";

Con il CSS in atto, il progetto si presenta come segue:

stelle vuote

Avrai notato che viene visualizzata solo la prima icona. Ma perché? È perché in precedenza abbiamo definito questa regola CSS:

.stars-inner width: 0;

Rimuovendo questa regola, la seconda icona apparirà in cima alla prima, in questo modo:

E se dovessimo fare il .stelle-interni elementi del 50%, ne riveleremmo la metà:

Comunque, inizialmente il larghezza del .stelle-interni l'elemento dovrebbe essere 0 e lo aggiorneremo dinamicamente in base al valore di valutazione dell'hotel in questione. Vediamo come succede nella prossima sezione.

Il JavaScript

Supponiamo che i nostri hotel abbiano i seguenti valori di valutazione:

const ratings = hotel_a: 2.8, hotel_b: 3.3, hotel_c: 1.9, hotel_d: 4.3, hotel_e: 4.74;

Tieni presente che, per semplicità, vengono specificati i valori hard-coded summenzionati (tra 0 e 5). In un progetto reale, tuttavia, questi potrebbero essere recuperati tramite una richiesta AJAX. Inoltre, nel mondo reale, dovremmo fare alcuni controlli per garantire che i valori derivati siano compresi nell'intervallo 0 - 5.

Quindi ora che abbiamo le valutazioni, eseguiamo le seguenti azioni:

Passiamo attraverso il giudizi oggetto. Si noti che il nome di ciascuna chiave dell'oggetto corrisponde al nome della classe di una riga della tabella. In questo modo, possiamo collegare una chiave oggetto ad un hotel.
Per ogni oggetto chiave, ne prendiamo il valore e lo convertiamo in un valore percentuale.
Abbiamo arrotondato il valore di cui sopra al 10 più vicino. Ciò significa che il valore risultante sarà 0%, 10%, 20%, 30%, ecc. Questo è importante perché ci consente di creare semistagne pulite. Ad esempio, un valore del 50% denota che due stelle e mezzo sono riempite.
Abbiamo impostato il larghezza del bersaglio .stelle-interni elemento uguale al valore arrotondato.

In base a ciò che abbiamo descritto sopra, ecco il codice associato:

const starTotal = 5; for (const rating in ratings) // 2 const starPercentage = (ratings [rating] / starTotal) * 100; // 3 const starPercentageRounded = '$ (Math.round (starPercentage / 10) * 10)%'; // 4 document.querySelector ('. $ Rating .stars-inner'). Style.width = starPercentageRounded;

La versione finale del nostro progetto è la seguente:

Supporto del browser

Questa demo è stata testata su vari dispositivi e funziona bene. Tuttavia, se riscontri problemi, fammelo sapere nei commenti qui sotto. Inoltre, come forse avrai notato, usiamo Babel per compilare il nostro codice ES6 fino a ES5.

Conclusione

In questo breve tutorial, abbiamo trattato un metodo per il riempimento delle valutazioni a stelle. Speriamo che ti sia piaciuto lavorare sul risultato finale: potresti persino trarre vantaggio da questa tecnica in un prossimo progetto, o migliorarlo per le tue esigenze.

Come sempre, se avete domande, condividetele con noi nei commenti qui sotto!

Web design