Questo è il progetto del corso Web. Dovrai creare una pagina web che mostra prodotti recuperati da un'API (locale), con funzionalità di visualizzazione dettagli e filtri.

Le funzionalità principali da implementare sono:

Recuperare i prodotti da API
Mostrare i prodotti in una tabella con:
- Immagine
- Nome
- Prezzo
- Disponibilità (✅ disponibile / ❌ non disponibile)
Modal dei dettagli - Quando clicchi su un prodotto:
- Mostra TUTTE le info (id, nome, descrizione, categoria, prezzo, immagine, disponibilità)
- Pulsante "Chiudi" per tornare alla lista
Bonus - Filtri:
- Barra di ricerca per filtrare per nome
- Dropdown per categoria

Come Iniziare

Creare la Repository su GitHub
- Vai su github.com e crea una nuova repository
- Nomina: NegozioWeb
- Copia l'URL della repo (es: https://github.com/[tuonome]/NegozioWeb.git)

Clonare la Repository

git clone https://github.com/[tuonome]/NegozioWeb.git
cd NegozioWeb

Copiare i File Base: copia i file forniti (index.html, style.css, script.js) nella tua cartella di progetto.
Apri il Progetto in VSCode: Da dentro vs code, apri la cartella del progetto (File → Open Folder).
Commit Iniziale: Dopo aver copiato i file, è importante fare un commit iniziale per avere una base di partenza. Nel tab di VSCode, vai su "Source Control" (icona del ramo git) e vedrai i file non tracciati. Aggiungili al commit e scrivi un messaggio chiaro come "Initial commit: HTML + CSS structure", poi fai commit+push.

Struttura HTML: In questo primo punto faremo la struttura base della pagina assieme, in modo da mostrare come lavorare con Git e fare commit frequenti.

🎯 Creiamo l'HTML della tabella
1. Tabella vuota
2. Header della tabella con: Immagine, Nome, Prezzo, Disponibilità
→ commit: "HTML: aggiunta struttura tabella"

🎯 Creiamo il modale
1. Div con class "modal nascosto" (nascosto di default)
2. Contenuto del modal: titolo, descrizione, immagine, prezzo, disponibilità
3. Pulsante "Chiudi" nel modal con class "btn-close"
→ commit: "HTML: aggiunta struttura modal"

📝 Compiti degli Studenti

Dopo la sessione iniziale, gli studenti dovranno completare le funzionalità indicate dentro il file script.js seguendo il workflow Git.

Dopo ogni funzionalità completata, devono fare un commit con un messaggio chiaro e significativo. Ogni tanto ricordarsi di fare push per evitare di perdere il lavoro!`

Gli esercizi da fare si possono dividere in 3 task principali:

Popolare la tabella con i dati dei prodotti
Implementare il modal dei dettagli
Bonus: Aggiungere filtri di ricerca e categoria

Struttura dei Dati

L'API locale restituirà un array di oggetti, dove ogni oggetto rappresenta un prodotto. Ogni prodotto dovrebbe avere questa struttura (esempio):

{
  "id": 1,
  "nome": "Laptop MacBook Pro",
  "descrizione": "Laptop professionale...",
  "categoria": "Elettronica",
  "prezzo": 2499.99,
  "immagine": "https://...",
  "disponibilita": true
}

💡 Suggerimenti per l'Implementazione

Dividere il lavoro in funzioni piccole:
- function creaRigaProdotto(product) → crea HTML di una riga
- function mostraProdotti(products) → riempie la tabella
- function toggleModal() → mostra/nascondi modal
Usa gli event listener:
- click su riga della tabella → mostra modal e riempi i dettagli
- click su bottone "Chiudi" → nascondi modal
Testing:
- Apri la console e verifica che il fetch funzioni (print dei dati come prova)
- Verifica che la tabella si popoli correttamente
- Clicca su una riga e verifica che appaia il modal