Obiettivo
Crea una galleria con pulsanti avanti, indietro e contatore.
Consegna: realizza array immagini, immagine principale, pulsanti avanti/indietro.
Requisiti minimi
- Usa un file HTML, un file CSS e un file JavaScript separato.
- Collega lo script con defer.
- Mostra sempre un risultato visibile nella pagina.
- Prevedi almeno un messaggio di errore o di stato.
- Controlla la console del browser durante i test.
Schema di partenza
Parti da una funzione piccola, testala, poi aggiungi le estensioni.
const elementi = {
azione: document.querySelector('#azione'),
output: document.querySelector('#output')
};
function mostraMessaggio(testo) {
elementi.output.textContent = testo;
}
elementi.azione.addEventListener('click', function() {
// sviluppa qui: indice corrente, funzioni mostraImmagine(), gestione limiti
mostraMessaggio('Funzione eseguita');
});
Suggerimenti tecnici
In questo esercizio conviene usare: indice corrente, funzioni mostraImmagine(), gestione limiti.
- Scrivi prima l'HTML con nomi chiari per ID e classi.
- Seleziona gli elementi all'inizio del file JavaScript.
- Isola la logica in una o più funzioni.
- Prova un caso corretto e almeno un caso sbagliato.
Estensioni possibili
- Aggiungi un contatore o uno storico delle azioni.
- Salva lo stato con localStorage quando ha senso.
- Rendi più chiaro il feedback con una classe CSS dinamica.