Obiettivo
Filtra un elenco di schede usando parole chiave.
Consegna: realizza input ricerca e almeno sei card con titolo e descrizione.
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: input event, textContent, includes(), hidden
mostraMessaggio('Funzione eseguita');
});
Suggerimenti tecnici
In questo esercizio conviene usare: input event, textContent, includes(), hidden.
- 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.