fix dettagli per progetto

2026-02-13 09:45:46 +01:00
parent c99495c2ae
commit 3c5bbed6e7
4 changed files with 83 additions and 44 deletions
--- a/javascript/12_Progetti/prodotti/README.md
+++ b/javascript/12_Progetti/prodotti/README.md
@@ -1,55 +1,63 @@
 # Negozio Online

-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.
+Questo è un progetto del corso Web.
+Dovrai creare una pagina web che mostra prodotti recuperati da un'API (locale), con funzionalità di visualizzazione dettagli e filtri (opzionali).

 Le funzionalità principali da implementare sono:
-1. **Recuperare i prodotti da API**
-2. **Mostrare i prodotti in una tabella** con:
-   - Immagine
-   - Nome
-   - Prezzo
-   - Disponibilità (✅ disponibile / ❌ non disponibile)
-3. **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
-4. **Bonus - Filtri:**
-   - Barra di ricerca per filtrare per nome
-   - Dropdown per categoria
+1. **Recuperare i prodotti da API** - Usare `fetch` per ottenere i dati da un'API locale
+2. **Mostrare i prodotti in una tabella** - immagine, nome, prezzo, disponibilità
+3. **Modale dei dettagli** - Quando clicchi su un prodotto mostra un modale (finestra popup) con tutte le info (immagine grande, nome, descrizione, prezzo, disponibilità) e un pulsante "×" per tornare alla tabella.
+4. **Bonus - Filtri** - Aggiungere filtri di ricerca per nome e categoria (opzionale)

 ## Come Iniziare

 1. **Creare la Repository su GitHub**
-    * Vai su [github.com](https://github.com) e crea una nuova repository
-    * Nomina: `NegozioWeb`
+    * Vai su [github.com](https://github.com) e crea una nuova repository (In alto un pulsante "+" e poi "New Repository")
+    * Repository Name: `NegozioWeb` → Create Repository
    * **Copia l'URL** della repo (es: `https://github.com/[tuonome]/NegozioWeb.git`)

 2. **Clonare la Repository**
-   ```bash
-   git clone https://github.com/[tuonome]/NegozioWeb.git
-   cd NegozioWeb
-   ```
+    ```bash
+    git clone https://github.com/[tuonome]/NegozioWeb.git
+    cd NegozioWeb
+    ```

-3. **Copiare i File Base**: copia i file forniti (`index.html`, `style.css`, `script.js`) nella tua cartella di progetto.
+3. **Copiare i File Base**: copia i file forniti (`index.html`, `style.css`, `script.js`, `README.md`) nella tua cartella di progetto.

-4. **Apri il Progetto in VSCode**: Da dentro vs code, apri la cartella del progetto (`File → Open Folder`).
+4. **Apri il Progetto in VSCode**: Da dentro vs code, apri la cartella del progetto (`File → Open Folder`).\
+*NOTA*: Prima di iniziare, assicurati di aver fatto il login a GitHub da VSCode, in modo da poter fare commit e push direttamente dall'editor.

 5. **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.

 6. **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.
+   ```
+   🎯 Colleghiamo i vari files
+   1. Collega il file CSS in index.html
+   2. Collega il file JS in index.html
+   3. Creiamo un div con class "container" che conterrà tutta la pagina
+   → commit: "HTML: aggiunta struttura tabella"
+   ```
   ```
   🎯 Creiamo l'HTML della tabella
   1. Tabella vuota
   2. Header della tabella con: Immagine, Nome, Prezzo, Disponibilità
+   3. Body con id "tabellaProdotti" (dove inseriremo i prodotti dinamicamente)
   → 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"
+   1. Div con class "modal nascosto" e id "modale"
+   2. Div interno con class "modal-content"
+   3. Contenuto del modal:
+     - H2 con id "prodottoNome"
+     - Immagine con id "prodottoImmagine"
+     - Paragrafo con id "prodottoDescrizione"
+     - Paragrafo con id "prodottoPrezzo"
+     - Paragrafo con id "prodottoDisponibilita"
+     - span con id "chiudi" e class "close" con dentro il simbolo "×"
   → commit: "HTML: aggiunta struttura modal"
+   → push o sincronizzazione per salvare su GitHub
   ```

 ## 📝 Esercizio da Implementare
--- a/javascript/12_Progetti/prodotti/script.js
+++ b/javascript/12_Progetti/prodotti/script.js
@@ -1,6 +1,6 @@
 /**
 * Progetto finale JS - Prodotti Negozio Online
- * Crea una pagina che mostra una lista di prodotti recuperati da un'API (localhost:5000/api/products)
+ * Crea una pagina che mostra una lista di prodotti recuperati da un'API (es. http://localhost:5000/api/products)
 * Ogni prodotto ha: id, nome, descrizione, categoria, prezzo, immagine, disponibilità
 * 
 * FUNZIONALITÀ:
--- a/javascript/12_Progetti/prodotti/style.css
+++ b/javascript/12_Progetti/prodotti/style.css
@@ -134,16 +134,6 @@ button:hover {
    background-color: #218838;
 }

-.btn-close {
-    background-color: #dc3545;
-    width: 100%;
-    margin-top: 20px;
-}
-
-.btn-close:hover {
-    background-color: #c82333;
-}
-
 /* MODAL */
 .modal {
    position: fixed;
@@ -188,18 +178,14 @@ button:hover {
    color: #000;
 }

-#productDetails {
-    margin-bottom: 20px;
-}
-
-#productDetails h2 {
+.modal-content h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
 }

-#productDetails img {
+.modal-content img {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 15px;
@@ -207,12 +193,12 @@ button:hover {
    object-fit: cover;
 }

-#productDetails p {
+.modal-content p {
    margin: 10px 0;
    line-height: 1.6;
 }

-#productDetails strong {
+.modal-content strong {
    color: #2c3e50;
 }

--- a/server-api/database/db.json
+++ b/server-api/database/db.json
@@ -737,6 +737,51 @@
        },
        {
            "id": 10,
+            "nome": "Sedia Gaming Ergonomica",
+            "descrizione": "Sedia da ufficio/gaming con supporto lombare, braccioli 4D regolabili, reclinabile fino a 180°",
+            "categoria": "Arredamento",
+            "prezzo": 299.99,
+            "immagine": "https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcQerRF7YKrUqeCsTkTYZc5-uQ72uSg4m8a-A7cqoG3H0JU9InyKeoLGX75MAjOZWHaONe9mypVw5JXKxUeCpP2wWNxYzFEHwAjaSqmyQjs7_40kTz5vp0JKY1k",
+            "disponibilita": true
+        },
+        {
+            "id": 11,
+            "nome": "Lampada LED da Scrivania",
+            "descrizione": "Lampada smart con 5 temperature di colore, dimmerabile, porta USB integrata",
+            "categoria": "Illuminazione",
+            "prezzo": 45.99,
+            "immagine": "https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcQNgTu8WVY2HtMjD8etZjIEFsG_ogipt0RL2-D0NQaLQtPz9TmjK8jPbHBNLX3g0tW6vU47WVjmfC18aKbiui_qAiif7i1spLl_169p3OgZwGlNN4hjBNrr",
+            "disponibilita": true
+        },
+        {
+            "id": 12,
+            "nome": "Zaino Porta PC 17 pollici",
+            "descrizione": "Zaino impermeabile con scomparto imbottito per laptop, tasca antifurto e porta USB",
+            "categoria": "Accessori",
+            "prezzo": 59.99,
+            "immagine": "https://encrypted-tbn2.gstatic.com/shopping?q=tbn:ANd9GcTZqTnx_yPdp08tBNzH6Pdgg3b9YfvPCIYIiqTMCJy3_QYWF9291EHn1z1nfsqRZdDlvDvdJvTcnXMKjIKfc3aNpgTKTOog6jT193FKV27-Fy-aoiKTWNwwgJY",
+            "disponibilita": true
+        },
+        {
+            "id": 13,
+            "nome": "Caricatore Wireless Rapido",
+            "descrizione": "Base di ricarica wireless 3-in-1 per smartphone, smartwatch e auricolari, 15W fast charge",
+            "categoria": "Accessori",
+            "prezzo": 39.99,
+            "immagine": "https://encrypted-tbn1.gstatic.com/shopping?q=tbn:ANd9GcQOKHL_PIwftXq38dUiK6lNrLjRyiTCRuSKnzL9DlNXJvqvYRYJkGa2kKspm8PE_fjMkhsnLhNp8R9ewlqx8-vNNeqQHnMF-0Qc_hhD31lDPjqySdeLmSafNQ",
+            "disponibilita": false
+        },
+        {
+            "id": 14,
+            "nome": "Microfono USB Professionale",
+            "descrizione": "Microfono a condensatore con filtro anti-pop, braccio regolabile e supporto anti-shock",
+            "categoria": "Audio",
+            "prezzo": 89.99,
+            "immagine": "https://m.media-amazon.com/images/I/61egnO8q6ZL._AC_SY300_SX300_QL70_ML2_.jpg",
+            "disponibilita": true
+        },
+        {
+            "id": 15,
            "nome": "Stand per Laptop Ergonomico",
            "descrizione": "Stand in alluminio pieghevole e regolabile in altezza",
            "categoria": "Accessori",