Esercizio 8 DOM+ fix
This commit is contained in:
35
JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/index.html
Normal file
35
JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/index.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>
|
||||
|
||||
<form id="profile-form" class="profile-form">
|
||||
<h1>Crea un utente</h1>
|
||||
<div class="form-group">
|
||||
<label for="nome">Nome Completo:</label>
|
||||
<input type="text" id="nome" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="eta">Età:</label>
|
||||
<input type="number" id="eta" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="bio">Biografia:</label>
|
||||
<textarea id="bio" rows="4" required></textarea>
|
||||
</div>
|
||||
<button id="btn-crea-card">Crea Profilo</button>
|
||||
</form>
|
||||
|
||||
<ul class="all-cards" id="cards-container">
|
||||
<!-- Le card create appariranno qui -->
|
||||
</ul>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
67
JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/script.js
Normal file
67
JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/script.js
Normal file
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* ESERCIZIO 1: Recupera i valori dagli input
|
||||
* Selezioniamo i seguenti elementi dal DOM: `nome`, `eta`, `bio`, `cards-container` e `btn-crea-card`
|
||||
* Sostituisci il contenuto delle virgolette con il metodo per selezionare gli elementi
|
||||
* (document.querySelector) usando gli id corretti.
|
||||
*/
|
||||
const inputNome = "";
|
||||
const inputEta = "";
|
||||
const inputBio = "";
|
||||
const contenitoreCard = "";
|
||||
const btnCreaCard = "";
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE: cancella dati input
|
||||
* Passi:
|
||||
* 1. Imposta il valore di ogni input a stringa vuota
|
||||
*/
|
||||
function cancellaDatiInput() {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE: valida dati input
|
||||
* Passi:
|
||||
* 1. Controlla che il valore di ogni input non sia vuoto
|
||||
* 2. Se uno è vuoto ritorna false
|
||||
* 3. Se tutti sono validi, ritorna true
|
||||
*/
|
||||
function validaDatiInput() {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE: crea la card profilo
|
||||
* Passi:
|
||||
* 1. In input prendi i valori nome, età, bio
|
||||
* 2. Crea un nuovo elemento <li> con document.createElement('li')
|
||||
* 3. Impostane la classe CSS a 'card'
|
||||
* 4. Crea un H3 con il nome
|
||||
* 5. Crea un paragrafo con l'età
|
||||
* 6. Crea un paragrafo con la biografia
|
||||
* 7. Aggiungi tutti gli elementi alla card nell'ordine indicato
|
||||
* 8. Aggiungi la card al cardsContainer
|
||||
*/
|
||||
function creaCardProfilo(nome, eta, bio) {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE: Event Listener sul bottone
|
||||
* Mettiamo tutto quello che abbiamo fatto insieme in un event listener
|
||||
* Passi:
|
||||
* 1. Al click del bottone, leggi i valori dagli input
|
||||
* 2. Valida i dati con validaDatiInput()
|
||||
* 3. Se validi:
|
||||
* - Chiama creaCardProfilo() con i dati
|
||||
* - Pulisci gli input con cancellaDatiInput()
|
||||
* 4. Se non validi, mostra un alert("Per favore, compila tutti i campi!")
|
||||
*/
|
||||
btnCreaCard.addEventListener('click', function () {
|
||||
});
|
||||
|
||||
94
JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/style.css
Normal file
94
JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/style.css
Normal file
@@ -0,0 +1,94 @@
|
||||
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;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
form {
|
||||
background: #ecf0f1;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 90%;
|
||||
padding: 8px;
|
||||
border: 1px solid #bdc3c7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
button:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
width: 190px;
|
||||
text-align: center;
|
||||
transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.card > * {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
background: linear-gradient(to right, #667eea, #764ba2);
|
||||
color: white;
|
||||
padding: 30px 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 0.9rem;
|
||||
color: #34495e;
|
||||
}
|
||||
Reference in New Issue
Block a user