From 3c5bbed6e73394d98b86182d3bb8f4b4f86a4eb4 Mon Sep 17 00:00:00 2001 From: Berack96 Date: Fri, 13 Feb 2026 09:45:46 +0100 Subject: [PATCH] fix dettagli per progetto --- javascript/12_Progetti/prodotti/README.md | 58 +++++++++++++---------- javascript/12_Progetti/prodotti/script.js | 2 +- javascript/12_Progetti/prodotti/style.css | 22 ++------- server-api/database/db.json | 45 ++++++++++++++++++ 4 files changed, 83 insertions(+), 44 deletions(-) diff --git a/javascript/12_Progetti/prodotti/README.md b/javascript/12_Progetti/prodotti/README.md index 757f78e..acf6216 100644 --- 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 diff --git a/javascript/12_Progetti/prodotti/script.js b/javascript/12_Progetti/prodotti/script.js index d70515e..c6d84e1 100644 --- 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À: diff --git a/javascript/12_Progetti/prodotti/style.css b/javascript/12_Progetti/prodotti/style.css index caaf8f4..2ea401b 100644 --- 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; } diff --git a/server-api/database/db.json b/server-api/database/db.json index c94a3e4..f63aa1a 100644 --- 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",