Berack/esercizi-web
1
0
Fork 0
Code Issues 1 Pull Requests Activity

Potenziale Progetto finale JS,HTML,CSS

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-06 22:24:01 +01:00
parent 90cdc7948a
commit 0ab014bfff
4 changed files with 352 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
javascript/JS_Esercizi 12 - Progetto finale/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prodotti Negozio Online</title>
<!-- Ricordarsi di inserire il link al CSS -->
</head>
<body>
<!-- Inserire qui il contenuto della pagina -->
<!-- Ricordarsi di inserire il link al JS -->
</body>
</html>

25
javascript/JS_Esercizi 12 - Progetto finale/script.js Normal file
View File

@@ -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
*/

219
javascript/JS_Esercizi 12 - Progetto finale/style.css Normal file
View File

@@ -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 */

92
server-api/database/db.json
View File

@@ -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
}
]
}