Progetto finale: Step 3
Ultimo passaggio: riprendi la scheda prodotto del Progetto 2 (già strutturata in HTML, stilizzata in CSS con Flexbox, responsive, e con il toggle tema CSS-only) e aggiungi il comportamento con JavaScript.
Consegna
- Validazione lato client del form “Richiedi informazioni” (o “Contatta il venditore”): intercetta il
submitconpreventDefault(), controlla che i campi obbligatori non siano vuoti e che il campo email contenga una@, mostra i messaggi d’errore in un elemento dedicato senza inviare il form finché non è tutto corretto - Rifai il toggle tema in JavaScript: sostituisci (o affianca, a tua scelta) il meccanismo CSS-only con un bottone reale e
addEventListener+classList.toggle, come visto nel capitolo sul DOM. Confronta mentalmente le due versioni: cosa cambia, cosa resta uguale? - Usa almeno un array in JS in un punto a tua scelta della pagina
Vincoli
- Il file
script.jsdeve essere separato, collegato con<script src="...">alla fine del<body> - Nessun JS inline
- Il form deve rimanere bloccato (niente invio reale) finché la validazione non è superata
Traguardo
A questo punto la scheda prodotto avrà attraversato tutti e tre i blocchi: struttura (HTML), aspetto (CSS), comportamento (JS) — lo stesso identico documento, arricchito un livello alla volta. È il modo più concreto per capire perché si dice che questi tre linguaggi lavorano insieme, e non sono tre linguaggi scollegati.