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

Tutti gli altri (6-10)

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-03 00:08:30 +01:00
parent 0043f1f83f
commit e6f6f17769
54 changed files with 3205 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
JS_Esercizi/JS_Esercizi 08 - DOM+/01_card_profilo/index.html Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profilo Utente</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold; font-size: 14px;">← Dashboard</a>
<div class="card-container">
<div class="card-header">
<img id="img-profilo" src="https://placehold.co/150" alt="Foto Profilo">
<h2 id="nome-completo">Nome Cognome</h2>
<p id="ruolo" class="ruolo-badge">Ruolo</p>
</div>
<div class="card-body">
<div class="dettaglio">
<strong>Email:</strong>
<span id="email">...</span>
</div>
<div class="dettaglio">
<strong>Telefono:</strong>
<span id="telefono">...</span>
</div>
<div class="dettaglio">
<strong>Indirizzo:</strong>
<span id="indirizzo">...</span>
</div>
<div id="box-verifica" class="verifica nascosto">
✅ Utente Verificato
</div>
</div>
<div class="card-footer">
<button id="btn-stampa">Stampa Profilo</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

53
JS_Esercizi/JS_Esercizi 08 - DOM+/01_card_profilo/script.js Normal file
View File

@@ -0,0 +1,53 @@
// DATI (Oggetto Singolo)
// Immagina che questi dati arrivino da un server o da un database.
const utente = {
nome: "Giulia",
cognome: "Verdi",
eta: 30,
email: "giulia.verdi@example.com",
telefono: "+39 333 1234567",
indirizzo: "Via Roma 10, Milano",
professione: "Graphic Designer",
fotoUrl: "https://randomuser.me/api/portraits/women/44.jpg", // Url di una foto vera
verificato: true // Prova a mettere false per vedere cosa succede
};
// 1. SELEZIONE ELEMENTI DOM
// Esercizio: Completa i querySelector abbinando gli ID corretti presi dall'HTML
const elNomeCompleto = document.querySelector(''); // es. #nome-completo
const elRuolo = document.querySelector('');
const elEmail = document.querySelector('');
const elTelefono = document.querySelector('');
const elIndirizzo = document.querySelector('');
const elImmagine = document.querySelector('');
const boxVerifica = document.querySelector('');
/**
* 2. RIEMPIMENTO DATI
* Ora devi prendere i dati dall'oggetto 'utente' e metterli dentro gli elementi HTML.
*/
// A. Testo Semplice (textContent)
// elNomeCompleto.textContent = ...
// ...
// B. Attributi (src)
// elImmagine.src = ...
// ...
// C. Logica Condizionale
// Se l'utente è "verificato" (true), mostriamo il box verde.
// Altrimenti lo lasciamo nascosto (o lo nascondiamo esplicitamente).
/**
* 3. EVENTI
* Fai funzionare il bottone "Stampa Profilo"
* Quando cliccato, deve lanciare un alert() con scritto: "Sto stampando il profilo di [NOME]"
* Alert permette di mostrare un messaggio all'utente e bloccare l'esecuzione finché non preme "OK".
* Il suo utilizzo è semplice: alert("Messaggio da mostrare");
*/
const btnStampa = document.querySelector('#btn-stampa');

105
JS_Esercizi/JS_Esercizi 08 - DOM+/01_card_profilo/style.css Normal file
View File

@@ -0,0 +1,105 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Stesso font dashboard */
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Stesso sfondo dashboard */
min-height: 100vh;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
color: #2c3e50;
}
.card-container {
background: white;
width: 320px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
text-align: center;
}
.card-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px 20px;
}
#img-profilo {
width: 100px;
height: 100px;
border-radius: 50%; /* Cerchio perfetto */
border: 4px solid white;
object-fit: cover;
margin-bottom: 10px;
}
h2 {
margin: 10px 0 5px 0;
font-size: 24px;
}
.ruolo-badge {
background: rgba(255, 255, 255, 0.2);
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
margin: 0;
}
.card-body {
padding: 20px;
text-align: left;
}
.dettaglio {
margin-bottom: 15px;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
color: #555;
}
strong {
color: #333;
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.verifica {
text-align: center;
color: #27ae60;
font-weight: bold;
margin-top: 20px;
padding: 10px;
background-color: #e8f8f5;
border-radius: 5px;
}
.nascosto {
display: none;
}
.card-footer {
padding: 15px;
background: #f9f9f9;
}
button {
background: linear-gradient(to right, #667eea, #764ba2); /* Riprende l'header */
color: white;
border: none;
padding: 12px 25px;
border-radius: 30px; /* Bottone a pillola moderno */
cursor: pointer;
font-weight: bold;
box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
transition: 0.2s;
}
button:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(118, 75, 162, 0.6);
}