Di seguito trovi una guida passo-passo per realizzare un sistema di rating (basato su stelle) utilizzando HTML, CSS e JavaScript puro. Questo tipo di funzionalità è molto utile per migliorare l’esperienza utente (UX) e può essere impiegata in diversi contesti: recensioni di prodotti, valutazioni di articoli o servizi e tanto altro.
Introduzione
Un sistema di valutazione (o rating) è un componente essenziale per molti siti web, perché:
- Permette agli utenti di esprimere rapidamente un giudizio o un’opinione.
- Aumenta il coinvolgimento e la fiducia, specialmente se associato a prodotti, servizi o contenuti.
- Fornisce informazioni utili a chi gestisce il sito per capire meglio le preferenze e i gusti dei visitatori.
Questa guida ti mostrerà come creare da zero un sistema di valutazione “a stelle” utilizzando JavaScript puro, arricchendolo con interazioni visive come l’evidenziazione al passaggio del mouse, e salvando la valutazione (opzionalmente) con localStorage in modo che l’utente non debba ripetere la valutazione a ogni visita.
Cosa imparerai
- Struttura HTML di base per visualizzare un gruppo di stelle (o altri elementi) su cui effettuare la votazione.
- Stile CSS per dare un aspetto accattivante alle stelle e aggiungere piccole animazioni.
- Logica JavaScript per:
- Gestire l’evento
hover(passaggio del mouse), così da evidenziare le stelle selezionate. - Catturare il
clicksu una stella e assegnare la valutazione. - Salvare la valutazione in
localStorageper mantenere il dato anche dopo il refresh o la chiusura del browser.
- Gestire l’evento
- Best Practice di UX per migliorare l’accessibilità del componente e fornire feedback immediato agli utenti.
Demo finale
Al termine della guida, avrai un sistema di rating funzionante e personalizzabile. L’utente potrà:
- Passare con il mouse sopra alle stelle e vedere quale punteggio sta selezionando.
- Cliccare per salvare la valutazione, che rimarrà anche al caricamento successivo della pagina.
- Godere di un’esperienza d’uso intuitiva e immediata.
Passaggi dettagliati
1. HTML: Creazione della struttura di base
Inizia creando un file HTML (ad esempio index.html) con una sezione dedicata alle stelle. Puoi utilizzare un container con cinque elementi che rappresentano le stelle, oppure il numero di stelle che preferisci.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Guida pratica su come creare un sistema di rating con JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creare un Sistema di Votazione con JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Come Creare un Sistema di Votazione con JavaScript</h1>
<div class="rating-container" aria-label="Sistema di valutazione a stelle">
<span class="star" data-value="1" aria-label="1 stella su 5">★</span>
<span class="star" data-value="2" aria-label="2 stelle su 5">★</span>
<span class="star" data-value="3" aria-label="3 stelle su 5">★</span>
<span class="star" data-value="4" aria-label="4 stelle su 5">★</span>
<span class="star" data-value="5" aria-label="5 stelle su 5">★</span>
</div>
<p id="rating-value">Nessuna valutazione</p>
<script src="script.js"></script>
</body>
</html>Note:
- Utilizziamo
spancondata-valueper ciascuna stella. In questo modo, JavaScript potrà facilmente riconoscere quale stella è stata cliccata. - L’attributo
aria-labelè utile per migliorare l’accessibilità, fornendo una descrizione significativa per tecnologie assistive (es. screen reader).
2. CSS: Stile per le stelle e animazioni
Nel tuo file CSS (ad esempio style.css), definisci l’aspetto delle stelle e eventuali transizioni. Ecco un esempio di stile:
.rating-container {
display: flex;
gap: 8px;
font-size: 2rem; /* Dimensione delle stelle */
cursor: pointer;
}
.star {
color: #ccc; /* Colore stella spenta */
transition: color 0.2s ease-in-out;
}
.star.hover,
.star.selected {
color: gold; /* Colore stella accesa */
}Note:
display: flex;egap: 8px;creano un layout orizzontale con spaziatura tra le stelle..star.hovere.star.selectedaggiungono classi che cambiano il colore della stella quando viene evidenziata o selezionata.
3. JavaScript: Gestione di hover, click e salvataggio
Crea un file JavaScript (ad esempio script.js) per aggiungere l’interattività.
3.1. Evidenziare le stelle al passaggio del mouse (hover)
const stars = document.querySelectorAll('.star');
const ratingValue = document.getElementById('rating-value');
// Funzione per evidenziare le stelle in base al valore selezionato (1-5)
function highlightStars(value) {
stars.forEach(star => {
const starValue = parseInt(star.getAttribute('data-value'), 10);
if (starValue <= value) {
star.classList.add('hover');
} else {
star.classList.remove('hover');
}
});
}
// Aggiungiamo gli event listener per l'hover su ogni stella
stars.forEach(star => {
star.addEventListener('mouseover', () => {
const value = parseInt(star.getAttribute('data-value'), 10);
highlightStars(value);
});
// Quando il mouse esce dall'area, rimuoviamo l'effetto hover
star.addEventListener('mouseout', () => {
stars.forEach(s => s.classList.remove('hover'));
});
});In questo modo, quando l’utente passa il cursore su una stella, tutte le stelle con un valore inferiore o uguale vengono evidenziate.
3.2. Catturare il click per salvare la valutazione
Per memorizzare il voto, aggiungiamo un evento click che assegni una classe .selected alle stelle selezionate. Inoltre, potrai opzionalmente salvare il valore in localStorage.
let savedRating = localStorage.getItem('userRating') || 0;
updateSelectedStars(savedRating);
// Funzione per aggiornare la selezione
function updateSelectedStars(value) {
stars.forEach(star => {
const starValue = parseInt(star.getAttribute('data-value'), 10);
if (starValue <= value) {
star.classList.add('selected');
} else {
star.classList.remove('selected');
}
});
ratingValue.textContent = value > 0 ? `La tua valutazione: ${value} / 5` : 'Nessuna valutazione';
}
// Ascoltiamo il click su ogni stella
stars.forEach(star => {
star.addEventListener('click', () => {
const value = parseInt(star.getAttribute('data-value'), 10);
// Salviamo la valutazione
localStorage.setItem('userRating', value);
// Aggiorniamo le stelle selezionate
updateSelectedStars(value);
});
});savedRating: recupera l’eventuale voto salvato in precedenza. Se non esiste, imposta il valore a 0.updateSelectedStars(value): evidenzia (con la classe.selected) tutte le stelle fino a quella corrispondente al valore passato. Inoltre, aggiorna il testo diratingValueper mostrare il valore all’utente.- Quando l’utente fa clic su una stella, salviamo il valore in
localStoragee aggiorniamo la UI.
Ottimizzazione UX
- Accessibilità:
- Assicurati di gestire il focus via tastiera. Puoi aggiungere l’attributo
tabindex="0"sulle stelle, in modo che siano raggiungibili con il tastoTab. - Grazie a
aria-labelerole="button", i lettori di schermo potranno interpretare correttamente il componente.
- Assicurati di gestire il focus via tastiera. Puoi aggiungere l’attributo
- Feedback visivo:
- Fornisci un messaggio chiaro sul voto selezionato, come “Hai valutato X su 5”.
- Considera di aggiungere un’animazione di transizione per passaggi di stato più fluidi.
- Gestione errori:
- Se desideri implementare un salvataggio su server, valuta di aggiungere un messaggio di errore se la connessione non funziona.
Conclusione
Implementare un sistema di votazione con JavaScript puro è un ottimo modo per coinvolgere gli utenti e migliorare la User Experience del tuo sito. Grazie a semplici funzioni di hover e click, e alla possibilità di sfruttare localStorage per memorizzare il voto, puoi offrire un’interazione rapida e intuitiva, personalizzandola a tuo piacimento.
Ora che conosci i passaggi fondamentali, puoi sperimentare e adattare il codice alle tue esigenze specifiche: variare il numero di stelle, cambiare colori e transizioni CSS oppure integrare un backend per salvare i dati lato server. Un sistema di rating personalizzato si rivela spesso un vantaggio competitivo, perché fornisce feedback utili e crea un rapporto di fiducia con i tuoi visitatori.
Buon lavoro con il tuo nuovo sistema di valutazione a stelle!
Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.
