diff --git a/javascript/JS_Esercizi 12 - Progetto finale/index.html b/javascript/JS_Esercizi 12 - Progetto finale/index.html
new file mode 100644
index 0000000..b74fafe
--- /dev/null
+++ b/javascript/JS_Esercizi 12 - Progetto finale/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ Prodotti Negozio Online
+
+
+
+
+
+
+
+
+
+
diff --git a/javascript/JS_Esercizi 12 - Progetto finale/script.js b/javascript/JS_Esercizi 12 - Progetto finale/script.js
new file mode 100644
index 0000000..ae5dcbe
--- /dev/null
+++ b/javascript/JS_Esercizi 12 - Progetto finale/script.js
@@ -0,0 +1,25 @@
+/**
+ * Progetto finale JS - Prodotti Negozio Online
+ * Crea una pagina che mostra una lista di prodotti recuperati da un'API (localhost)
+ * Ogni prodotto ha: id, nome, descrizione, categoria, prezzo, immagine, disponibilità
+ *
+ * FUNZIONALITÀ:
+ * 1. Recupera i prodotti da API (fetch GET)
+ * 2. Mostra i prodotti in una tabella con immagine, nome, prezzo e disponibilità
+ * 3. Quando l'utente clicca su un prodotto, mostra i dettagli in una sezione a parte (usa le classi "modal" e "nascosto" nella sezione)
+ * 4. Nella sezione dei dettagli, mostra TUTTE le info del prodotto e un pulsante "Chiudi" per nascondere la sezione
+ *
+ * Suggerimenti per l'implementazione:
+ * - Crea una funzione che genera una riga di un singolo prodotto
+ * - Crea una funzione che visualizza l'intera tabella dei prodotti (che richiama la funzione precedente per ogni prodotto)
+ * - Crea una funzione che fa il toggle della sezione dei dettagli (mostra/nascondi)
+ * - Aggiungi un event listener a ogni riga della tabella per mostrare i dettagli del prodotto cliccato (usa la funzione di toggle)
+ * - Aggiungi un event listener al pulsante "Chiudi" per nascondere la sezione dei dettagli (richiama la stessa funzione di toggle)
+ *
+ * Bonus:
+ * - Aggiungi una barra di ricerca per filtrare i prodotti per nome (filtro testuale)
+ * - Aggiungi un filtro per categoria (dropdown) per mostrare solo i prodotti di una certa categoria
+ */
+
+
+
diff --git a/javascript/JS_Esercizi 12 - Progetto finale/style.css b/javascript/JS_Esercizi 12 - Progetto finale/style.css
new file mode 100644
index 0000000..677b9ba
--- /dev/null
+++ b/javascript/JS_Esercizi 12 - Progetto finale/style.css
@@ -0,0 +1,219 @@
+/* Reset e Base */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background-color: #f5f5f5;
+ color: #333;
+ padding: 20px;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ padding: 30px;
+}
+
+h1 {
+ text-align: center;
+ color: #2c3e50;
+ margin-bottom: 30px;
+ font-size: 2.5rem;
+}
+
+/* BARRA DI RICERCA E FILTRI */
+.filters {
+ display: flex;
+ gap: 15px;
+ margin-bottom: 30px;
+ flex-wrap: wrap;
+}
+
+.search-bar {
+ flex: 1;
+ min-width: 250px;
+ padding: 12px 15px;
+ border: 2px solid #ddd;
+ border-radius: 4px;
+ font-size: 1rem;
+ transition: border-color 0.3s;
+}
+
+.search-bar:focus {
+ outline: none;
+ border-color: #007bff;
+ box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
+}
+
+.category-filter {
+ padding: 12px 15px;
+ border: 2px solid #ddd;
+ border-radius: 4px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: border-color 0.3s;
+}
+
+.category-filter:focus {
+ outline: none;
+ border-color: #007bff;
+}
+
+/* TABELLA PRODOTTI */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+
+thead {
+ background-color: #2c3e50;
+ color: white;
+}
+
+th {
+ padding: 15px;
+ text-align: left;
+ font-weight: 600;
+}
+
+td {
+ padding: 15px;
+ border-bottom: 1px solid #eee;
+}
+
+tbody tr {
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+tbody tr:hover {
+ background-color: #f9f9f9;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+}
+
+/* IMMAGINI NELLA TABELLA */
+table img {
+ width: 60px;
+ height: 60px;
+ border-radius: 4px;
+ object-fit: cover;
+}
+
+/* DISPONIBILITÀ */
+.available {
+ color: #28a745;
+ font-weight: 600;
+}
+
+.unavailable {
+ color: #dc3545;
+ font-weight: 600;
+}
+
+/* PULSANTI */
+button {
+ padding: 10px 20px;
+ background-color: #28a745;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: background-color 0.3s;
+}
+
+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;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.modal.nascosto {
+ display: none;
+}
+
+.modal-content {
+ background: white;
+ padding: 30px;
+ border-radius: 8px;
+ max-width: 500px;
+ width: 90%;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+ position: relative;
+ max-height: 80vh;
+ overflow-y: auto;
+}
+
+.close {
+ position: absolute;
+ top: 15px;
+ right: 20px;
+ font-size: 2rem;
+ cursor: pointer;
+ color: #666;
+ transition: color 0.3s;
+}
+
+.close:hover {
+ color: #000;
+}
+
+#productDetails {
+ margin-bottom: 20px;
+}
+
+#productDetails h2 {
+ color: #2c3e50;
+ margin-bottom: 15px;
+ border-bottom: 2px solid #007bff;
+ padding-bottom: 10px;
+}
+
+#productDetails img {
+ width: 100%;
+ border-radius: 6px;
+ margin-bottom: 15px;
+ max-height: 300px;
+ object-fit: cover;
+}
+
+#productDetails p {
+ margin: 10px 0;
+ line-height: 1.6;
+}
+
+#productDetails strong {
+ color: #2c3e50;
+}
+
+/* Stile aggiuntivo per personalizzazione */
diff --git a/server-api/database/db.json b/server-api/database/db.json
index 38e47d0..654e776 100644
--- a/server-api/database/db.json
+++ b/server-api/database/db.json
@@ -532,5 +532,97 @@
"titolo": "Rifare il sito personale",
"completato": false
}
+ ],
+ "products": [
+ {
+ "id": 1,
+ "nome": "Laptop MacBook Pro",
+ "descrizione": "Laptop professionale con processore M2, 16GB RAM, display Retina da 14 pollici",
+ "categoria": "Elettronica",
+ "prezzo": 2499.99,
+ "immagine": "https://applepremiumstore.com.ng/wp-content/uploads/2022/07/mbp-silver-gallery1-202206-510x392.jpeg",
+ "disponibilita": true
+ },
+ {
+ "id": 2,
+ "nome": "Cuffie Wireless Sony",
+ "descrizione": "Cuffie over-ear con cancellazione del rumore attiva, batteria 30 ore",
+ "categoria": "Audio",
+ "prezzo": 349.99,
+ "immagine": "https://www.sony.it/image/09165d9c9b4354178a8a73fe9176d53f?fmt=pjpeg&resMode=bisharp&wid=360",
+ "disponibilita": true
+ },
+ {
+ "id": 3,
+ "nome": "Mouse Logitech MX Master",
+ "descrizione": "Mouse ergonomico programmabile con precisione elevata",
+ "categoria": "Accessori",
+ "prezzo": 99.99,
+ "immagine": "https://resource.logitech.com/c_fill,q_auto,f_auto,dpr_1.0/d_transparent.gif/content/dam/logitech/en/products/mice/mx-master-4/gallery/mx-master-4-graphite-top-angle-gallery-1.png",
+ "disponibilita": false
+ },
+ {
+ "id": 4,
+ "nome": "Monitor LG 4K",
+ "descrizione": "Monitor 27 pollici 4K UHD con HDR10, refresh rate 60Hz",
+ "categoria": "Elettronica",
+ "prezzo": 599.99,
+ "immagine": "https://www.lg.com/content/dam/channel/wcms/it/monitor/4k/32ur550-b/gallery/02-gallery/uhd-32ur550-gallery-03-2010.jpg/jcr:content/renditions/thum-1600x1062.jpeg",
+ "disponibilita": true
+ },
+ {
+ "id": 5,
+ "nome": "Tastiera Meccanica RGB",
+ "descrizione": "Tastiera gaming meccanica con switch Blue, illuminazione RGB",
+ "categoria": "Accessori",
+ "prezzo": 159.99,
+ "immagine": "https://m.media-amazon.com/images/I/61K25cqZzYL.jpg",
+ "disponibilita": true
+ },
+ {
+ "id": 6,
+ "nome": "Tablet iPad Air",
+ "descrizione": "Tablet 11 pollici con chip M1, 64GB storage, display Liquid Retina",
+ "categoria": "Elettronica",
+ "prezzo": 799.99,
+ "immagine": "https://store.storeimages.cdn-apple.com/1/as-images.apple.com/is/ipad-air-finish-select-gallery-202405-13inch-blue-wifi?wid=5120&hei=2880&fmt=p-jpg&qlt=80&.v=SzlUeW5ITUpKK1FKdDdNS0xNUVhmM3hxSU9Rc1hENld5ZlZGbisxZU9hWGJrbFd6ZHBvVk05L3d0WWlJMkh3MEU1V0hVSjZLVHJGenZsOFVicTBNclV1ZnhKeHNGWFhISWx4Q0lTRXA4dkY5Q2drLzhtOFgzejV4MENrZ0JFZVBwak9PMXpaSGlQNVErR3pISzM5NVpB&traceId=1",
+ "disponibilita": true
+ },
+ {
+ "id": 7,
+ "nome": "Webcam Logitech 4K",
+ "descrizione": "Webcam 4K ultra HD per streaming e videoconferenze",
+ "categoria": "Accessori",
+ "prezzo": 199.99,
+ "immagine": "https://resource.logitech.com/content/dam/logitech/en/products/webcams/brio/gallery/brio-gallery-1.png",
+ "disponibilita": false
+ },
+ {
+ "id": 8,
+ "nome": "Hub USB-C Anker",
+ "descrizione": "Hub con 7 porte USB, HDMI, lettore SD e ricarica via USB-C",
+ "categoria": "Accessori",
+ "prezzo": 49.99,
+ "immagine": "https://m.media-amazon.com/images/I/615HRY2dnML._AC_UF1000,1000_QL80_.jpg",
+ "disponibilita": true
+ },
+ {
+ "id": 9,
+ "nome": "Portatile Storage Esterno 2TB",
+ "descrizione": "Disco rigido portatile 2TB USB 3.1, velocità fino a 130MB/s",
+ "categoria": "Storage",
+ "prezzo": 129.99,
+ "immagine": "https://store.storeimages.cdn-apple.com/1/as-images.apple.com/is/HRQ12?wid=1144&hei=1144&fmt=jpeg&qlt=90&.v=ekF1Wk9BM2YxYXk2TjVQYTBkSVVmQWtuVHYzMERCZURia3c5SzJFOTlPaGlOZm1vUXN2cjVNeTNKZXZEclZjS1pzcXBPb0IvOVo4Z2pyYmtaS0ZBNHc",
+ "disponibilita": true
+ },
+ {
+ "id": 10,
+ "nome": "Stand per Laptop Ergonomico",
+ "descrizione": "Stand in alluminio pieghevole e regolabile in altezza",
+ "categoria": "Accessori",
+ "prezzo": 39.99,
+ "immagine": "https://media.startech.com/cms/products/gallery_large/laptop-stand-silver.main.jpg",
+ "disponibilita": true
+ }
]
}
\ No newline at end of file