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

renamed js folder

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-05 01:30:42 +01:00
parent 97e36b8e29
commit 3d84295870
113 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
javascript/JS_Esercizi 08 - DOM+/00_ripasso/index.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ripasso DOM - Step by Step</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="container">
<h1>🎓 Ripasso DOM - Step by Step</h1>
<p class="subtitle">Selettori, Manipolazione Testo, Eventi</p>
<!-- ============ STEP 1: SELETTORI ============ -->
<div class="step">
<h2>Step 1️⃣ - Selettori CSS</h2>
<p class="step-description">Impara a selezionare elementi dal DOM usando querySelector</p>
<div class="exercise">
<h3>Esercizio 1.1: Seleziona per ID</h3>
<p id="messaggio-id">Questo elemento ha un ID</p>
<p class="risultato" id="risultato-1-1">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 1.2: Seleziona per Classe</h3>
<p class="testo-blu">Sono blu</p>
<p class="testo-blu">Anche io sono blu</p>
<p class="risultato" id="risultato-1-2">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 1.3: Seleziona per Tag</h3>
<span>Sono uno span</span>
<span>Sono un altro span</span>
<p class="risultato" id="risultato-1-3">Aspettando...</p>
</div>
</div>
<!-- ============ STEP 2: MANIPOLAZIONE TESTO ============ -->
<div class="step">
<h2>Step 2️⃣ - Manipolazione Testo</h2>
<p class="step-description">Cambia il contenuto dei tag usando textContent</p>
<div class="exercise">
<h3>Esercizio 2.1: Cambia Testo in un Paragrafo</h3>
<p id="paragrafo-da-cambiare">Clicca il bottone qui sotto per cambiarmi!</p>
<button id="btn-cambiaP">Cambia Testo</button>
<p class="risultato" id="risultato-2-1">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 2.2: Scrivi nel DOM</h3>
<div id="area-scrittura" class="area-output"></div>
<button id="btn-scrivi">Scrivi nel DOM</button>
<p class="risultato" id="risultato-2-2">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 2.3: Testo Dinamico</h3>
<input type="text" id="input-nome" placeholder="Scrivi il tuo nome">
<button id="btn-saluta">Saluta</button>
<p id="area-saluto" class="area-output"></p>
<p class="risultato" id="risultato-2-3">Aspettando...</p>
</div>
</div>
<!-- ============ STEP 3: EVENTI ============ -->
<div class="step">
<h2>Step 3️⃣ - Eventi</h2>
<p class="step-description">Rispondi ai click dell'utente e agli input</p>
<div class="exercise">
<h3>Esercizio 3.1: Click Semplice</h3>
<button id="btn-click">Cliccami!</button>
<p id="contatore-click" class="area-output">Click: 0</p>
<p class="risultato" id="risultato-3-1">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 3.2: Input Event</h3>
<p>Scrivi qualcosa e vedi il risultato in tempo reale:</p>
<input type="text" id="input-tempo-reale" placeholder="Digita qui...">
<p id="echo" class="area-output">Qui apparirà quello che scrivi...</p>
<p class="risultato" id="risultato-3-2">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 3.3: Click su Elemento Specifico</h3>
<div class="box-click" id="box1">Box 1</div>
<div class="box-click" id="box2">Box 2</div>
<div class="box-click" id="box3">Box 3</div>
<p id="log-click" class="area-output">Log click:</p>
<p class="risultato" id="risultato-3-3">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 3.4: Toggle Classe CSS (Bonus)</h3>
<p id="elemento-toggle" class="elemento-normale">Clicca su di me per cambiarmi</p>
<p class="risultato" id="risultato-3-4">Aspettando...</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

263
javascript/JS_Esercizi 08 - DOM+/00_ripasso/script.js Normal file
View File

@@ -0,0 +1,263 @@
/**
* ============================================================
* RIPASSO DOM - STEP BY STEP
* ============================================================
* Questo file contiene esercizi di base sul DOM.
* Ogni esercizio ha una soluzione che modifica l'HTML
* e mostra il risultato visibile immediatamente.
*/
// ============ STEP 1: SELETTORI ============
/**
* ESERCIZIO 1.1: Selettori per ID
* Passi:
* 1. Seleziona l'elemento con id="messaggio-id" usando document.querySelector('#messaggio-id')
* 2. Scrivi il risultato in console per verificare
* 3. Aggiorna il paragrafo con id="risultato-1-1" scrivendo "✅ Elemento selezionato: " + il testo dell'elemento
*/
function esercizio_1_1() {
const elemento = document.querySelector('');
if (elemento) {
const risultato = document.querySelector('#risultato-1-1');
risultato.textContent = '✅ Elemento selezionato: ' + elemento.textContent;
}
}
/**
* ESERCIZIO 1.2: Selettori per Classe
* Passi:
* 1. Seleziona il PRIMO elemento con classe "testo-blu" usando document.querySelector
*/
function esercizio_1_2() {
const elemento = document.querySelector('');
if (elemento) {
const risultato = document.querySelector('#risultato-1-2');
risultato.textContent = '✅ Prima classe trovata: ' + elemento.textContent;
}
}
/**
* ESERCIZIO 1.3: Selettori per Tag
* Passi:
* 1. Seleziona il PRIMO elemento <span> usando document.querySelector
*/
function esercizio_1_3() {
const elemento = document.querySelector('');
if (elemento) {
const risultato = document.querySelector('#risultato-1-3');
risultato.textContent = '✅ Span trovato: ' + elemento.textContent;
}
}
// Eseguire gli esercizi 1.x
esercizio_1_1();
esercizio_1_2();
esercizio_1_3();
// ============ STEP 2: MANIPOLAZIONE TESTO ============
/**
* ESERCIZIO 2.1: Cambia il testo in un paragrafo
* Passi:
* 1. Seleziona il bottone con id="btn-cambiaP"
* 2. Seleziona il paragrafo con id="paragrafo-da-cambiare"
* 3. Aggiungi un event listener al bottone che, al click:
* - Cambia il textContent del paragrafo a "Ho cambiato! ✨"
*/
function esercizio_2_1() {
const btn = document.querySelector('');
const paragrafo = document.querySelector('');
if (btn && paragrafo) {
btn.addEventListener('click', () => {
paragrafo.textContent
});
const risultato = document.querySelector('#risultato-2-1');
risultato.textContent = "✅ Testo cambato"
}
}
/**
* ESERCIZIO 2.2: Scrivi nel DOM
* Passi:
* 1. Seleziona il bottone con id="btn-scrivi"
* 2. Seleziona il div con id="area-scrittura"
* 3. Aggiungi un event listener che, al click:
* - Aggiungi un nuovo <p> con il testo "Riga aggiunta al DOM!"
* - Usa append() per aggiungere il paragrafo al div
*/
function esercizio_2_2() {
const btn = document.querySelector('');
const area = document.querySelector('');
if (btn && area) {
btn.addEventListener('click', () => {
const nuovoParagrafo = document.createElement('');
nuovoParagrafo.textContent
});
const risultato = document.querySelector('#risultato-2-2');
risultato.textContent = "✅ Elemento aggiunto"
}
}
/**
* ESERCIZIO 2.3: Testo Dinamico da Input
* Passi:
* 1. Seleziona l'input con id="input-nome"
* 2. Seleziona il bottone con id="btn-saluta"
* 3. Seleziona il div con id="area-saluto"
* 4. Aggiungi un event listener al bottone che:
* - Leggi il valore dell'input (input.value)
* - Scrivi nel area-saluto: "Ciao [NOME]! 👋"
*/
function esercizio_2_3() {
const input = document.querySelector('');
const btn = document.querySelector('');
const area = document.querySelector('');
if (input && btn && area) {
btn.addEventListener('click', () => {
const nome = '';
area.textContent
});
const risultato = document.querySelector('#risultato-2-3');
risultato.textContent = "✅ Saluto inviato"
}
}
// Eseguire gli esercizi 2.x
esercizio_2_1();
esercizio_2_2();
esercizio_2_3();
// ============ STEP 3: EVENTI ============
/**
* ESERCIZIO 3.1: Click Semplice - Contatore
* Passi:
* 1. Seleziona il bottone con id="btn-click"
* 2. Seleziona l'elemento con id="contatore-click"
* 3. Aggiungi un event listener che, al click:
* - Incrementa count (count++)
* - Aggiorna il testo mostrando "Click: " + count
*/
let count = 0; // NOTA: Variabile globale
function esercizio_3_1() {
const btn = document.querySelector('');
const contatore = document.querySelector('');
if (btn && contatore) {
btn.addEventListener('click', () => {
});
const risultato = document.querySelector('#risultato-3-1');
risultato.textContent = "✅ Contatore attivo";
}
}
/**
* ESERCIZIO 3.2: Input Event - Echo Tempo Reale
* Passi:
* 1. Seleziona l'input con id="input-tempo-reale"
* 2. Seleziona il paragrafo con id="echo"
* 3. Aggiungi un event listener su 'input' (NON click!) che:
* - Leggi il valore dell'input (event.target.value o input.value)
* - Scrivi nel echo lo stesso testo in tempo reale
* - Se input vuoto, mostra "Scrivi qualcosa..."
*
* Nota: 'input' è l'evento che si scatta mentre l'utente digita
* 'click' è l'evento che si scatta quando l'utente clicca
* 'change' è l'evento che si scatta quando l'utente finisce di modificare
*/
function esercizio_3_2() {
const input = document.querySelector('');
const echo = document.querySelector('');
if (input && echo) {
input.addEventListener('input', (event) => {
});
const risultato = document.querySelector('#risultato-3-2');
risultato.textContent = "✅ Echo attivo";
}
}
/**
* ESERCIZIO 3.3: Click su Elementi Specifici
* Passi:
* 1. Seleziona tutti gli elementi con classe "box-click" usando querySelectorAll
* 2. Seleziona il paragrafo con id="log-click"
* 3. Per ogni box, aggiungi un event listener al click che:
* - Leggi l'id del box (event.target.id)
* - Crea un nuovo elemento <p>
* - Imposta il testo del paragrafo a "[id del box] cliccato"
* - Aggiungi il paragrafo al log usando append()
*
* Nota: Devi usare un loop (for o forEach) per aggiungere il listener a tutti i box
*/
function esercizio_3_3() {
const boxes = document.querySelectorAll('');
const log = document.querySelector('');
if (boxes.length > 0) {
boxes.forEach((box) => {
box.addEventListener('click', (event) => {
});
});
const risultato = document.querySelector('#risultato-3-3');
risultato.textContent = "✅ Log attivo";
}
}
/**
* ESERCIZIO 3.4 (BONUS): Toggle Classe CSS
* Passi:
* 1. Seleziona l'elemento con id="elemento-toggle"
* 2. Aggiungi un event listener al click che:
* - Usa classList.toggle('elemento-attivo') per aggiungere/rimuovere la classe
*
* Nota: Assicurati che in style.css esista una classe .elemento-attivo
*/
function esercizio_3_4() {
const elemento = document.querySelector('');
if (elemento) {
elemento.addEventListener('click', () => {
});
const risultato = document.querySelector('#risultato-3-4');
risultato.textContent = "✅ Toggle attivo";
}
}
// Eseguire gli esercizi 3.x
esercizio_3_1();
esercizio_3_2();
esercizio_3_3();
esercizio_3_4();

232
javascript/JS_Esercizi 08 - DOM+/00_ripasso/style.css Normal file
View File

@@ -0,0 +1,232 @@
/* ============================================================
RIPASSO DOM - STILI
============================================================ */
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;
color: #2c3e50;
}
.container {
background: white;
width: 100%;
max-width: 650px;
margin: 0 auto;
padding: 30px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #34495e;
margin: 0 0 10px 0;
font-size: 2rem;
}
.subtitle {
text-align: center;
color: #7f8c8d;
font-size: 1rem;
margin-bottom: 30px;
}
/* ============ STEP ============ */
.step {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.step:last-child {
border-bottom: none;
}
.step h2 {
color: #2980b9;
margin-top: 0;
margin-bottom: 5px;
font-size: 1.5rem;
}
.step-description {
color: #7f8c8d;
margin-bottom: 15px;
font-size: 0.95rem;
margin-top: 0;
}
/* ============ EXERCISE ============ */
.exercise {
background: white;
margin-bottom: 15px;
padding: 15px;
border-bottom: 1px solid #eee;
border-radius: 6px;
transition: box-shadow 0.2s ease;
}
.exercise:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.exercise:last-child {
border-bottom: none;
}
.exercise h3 {
color: #2c3e50;
margin: 15px 0 10px 0;
font-size: 1rem;
}
.exercise p {
margin: 5px 0;
font-size: 0.9rem;
}
.testo-blu {
color: #3498db;
font-weight: 500;
}
/* ============ INPUT & BUTTON ============ */
input[type="text"],
input[type="number"],
textarea {
width: 100%;
padding: 8px;
margin: 8px 0;
border: 1px solid #bdc3c7;
border-radius: 5px;
font-size: 0.95rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
box-sizing: border-box;
}
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.2);
}
button {
background: #3498db;
color: white;
border: none;
padding: 10px 20px;
margin: 8px 5px 8px 0;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: all 0.2s ease;
font-size: 0.9rem;
box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
}
button:hover {
background: #2980b9;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
transform: translateY(-1px);
}
button:active {
border-radius: 5px;
color: #2c3e50;
white-space: pre-wrap;
word-break: break-word;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
/* ============ RISULTATO & AREA OUTPUT ============ */
.risultato {
background: #f8fafb;
border: 1px solid #d5d8dc;
padding: 8px;
border-radius: 5px;
margin-top: 8px;
color: #34495e;
font-size: 0.85rem;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
.area-output {
background: #f8fafb;
border: 1px solid #d5d8dc;
padding: 10px;
border-radius: 5px;
margin-top: 8px;
color: #34495e;
font-size: 0.9rem;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
min-height: 20px;
word-wrap: break-word;
white-space: pre-wrap;
}
/* ============ BOX CLICK ============ */
.box-click {
display: inline-block;
width: 90px;
height: 90px;
background: #f0f3f4;
color: #2c3e50;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
margin: 5px;
font-weight: bold;
font-size: 0.9rem;
border: 1px solid #d5d8dc;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.box-click:hover {
background: #e8ecef;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.box-click:active {
transform: translateY(0);
}
/* ============ ELEMENTO TOGGLE ============ */
.elemento-normale {
padding: 15px;
border: 2px solid #3498db;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
color: #2c3e50;
}
.elemento-normale:hover {
background: #ecf0f1;
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}
.elemento-attivo {
background: #3498db;
color: white;
border-color: #2980b9;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

48
javascript/JS_Esercizi 08 - DOM+/01_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
javascript/JS_Esercizi 08 - DOM+/01_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
javascript/JS_Esercizi 08 - DOM+/01_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);
}

35
javascript/JS_Esercizi 08 - DOM+/02_card_profilo/index.html Normal file
View 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
javascript/JS_Esercizi 08 - DOM+/02_card_profilo/script.js Normal file
View 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
javascript/JS_Esercizi 08 - DOM+/02_card_profilo/style.css Normal file
View 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;
}

37
javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/index.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01 - Lista Semplice</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="container">
<h1>Lista Semplice</h1>
<p class="subtitle">Crea liste dinamicamente usando cicli e DOM</p>
<div class="esercizio">
<h2>Frutti</h2>
<ul id="lista-frutti" class="lista-items">
<!-- Gli elementi della lista saranno creati via JavaScript -->
</ul>
</div>
<div class="esercizio">
<h2>Libri</h2>
<ul id="lista-libri" class="lista-items">
<!-- Gli elementi della lista saranno creati via JavaScript -->
</ul>
</div>
<div class="esercizio">
<h2>Cose da Fare</h2>
<ul id="lista-todo" class="lista-items">
<!-- Gli elementi della lista saranno creati via JavaScript -->
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

59
javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/script.js Normal file
View File

@@ -0,0 +1,59 @@
/**
* ESERCIZIO 1: Popola Lista di Frutti
* Questa funzione si occupa di creare gli elementi della lista
* seguendo questi passi:
* 1. Cicla l'array 'frutti'
* 2. Per ogni frutto, crea un elemento <li>
* 3. Imposta il textContent dell'li al nome del frutto
* 4. Aggiungi l'li alla lista nel DOM
*/
const frutti = ['🍎 Mela', '🍌 Banana', '🍊 Arancia', '🍐 Pera', '🍇 Uva', '🥝 Kiwi'];
function popolaFrutti() {
}
/**
* ESERCIZIO 2: Popola Lista di Libri
* Questa funzione si occupa di creare gli elementi della lista
* seguendo questi passi:
* 1. Cicla l'array 'libri'
* 2. Per ogni libro, crea un elemento <li>
* 3. Imposta il textContent dell'li a: "TITOLO - di AUTORE"
* 4. Aggiungi l'li alla lista nel DOM
*/
const libri = [
{ titolo: 'Il Signore degli Anelli', autore: 'J.R.R. Tolkien' },
{ titolo: '1984', autore: 'George Orwell' },
{ titolo: 'Il Grande Gatsby', autore: 'F. Scott Fitzgerald' },
{ titolo: 'Harry Potter e la Pietra Filosofale', autore: 'J.K. Rowling' }
];
function popolaLibri() {
}
/**
* ESERCIZIO 3: Lista di cose da fare (TODO)
* Questa funzione si occupa di creare gli elementi della lista
* seguendo questi passi:
* 1. Cicla l'array 'todo'
* 2. Per ogni attività, crea un elemento <li>
* 3. Imposta il textContent dell'li al testo dell'attività
* 4. Aggiungi un evento click che, al click, cambia la classe CSS in 'completato' (toggle)
* 5. Aggiungi l'li alla lista nel DOM
*/
const todo = [
{ testo: 'Studiare JavaScript', completato: false },
{ testo: 'Fare esercizi sul DOM', completato: false },
{ testo: 'Creare un progetto', completato: false },
{ testo: 'Rivedere il codice', completato: false }
];
function popolaTodo() {
}
// NON MODIFICARE: Chiamate iniziali
popolaFrutti();
popolaLibri();
popolaTodo();

76
javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/style.css Normal file
View File

@@ -0,0 +1,76 @@
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;
}
.container {
background: white;
width: 450px;
padding: 30px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #34495e;
margin-bottom: 20px;
}
.subtitle {
text-align: center;
color: #7f8c8d;
font-size: 1rem;
margin-bottom: 25px;
}
.esercizio {
margin-bottom: 25px;
border-bottom: 1px solid black;
}
.esercizio:last-child {
border-bottom: none;
}
.esercizio h2 {
color: #2980b9;
margin-top: 0;
}
ul {
list-style-type: none;
padding-left: 20px;
display: flex;
flex-wrap: wrap;
max-width: 100%;
}
li {
margin-bottom: 8px;
position: relative;
padding: 10px;
margin-right: 10px;
background: #ecf0f1;
border-radius: 8px;
border: 1px solid #b2b2b2;
}
li:hover {
background: #e0e0e0;
cursor: pointer;
transform: scale(1.05);
transition: all 0.05s ease-in-out;
}
.completato {
text-decoration: line-through;
color: #95a5a6;
}

29
javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/index.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista della Spesa</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="container">
<h1>🛒 Lista della Spesa</h1>
<div class="input-group">
</div>
<div class="totale-container">
</div>
<hr>
<ul id="lista-spesa">
</ul>
</div>
<script src="script.js"></script>
</body>
</html>

93
javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js Normal file
View File

@@ -0,0 +1,93 @@
// DATI INIZIALI
// Questa lista funge da "Database" locale. Tutto ciò che vedi a schermo DEVE derivare da qui.
// Inizialmente contiene due prodotti di esempio (rimuovete se volete)
let lista = [
{ prodotto: 'Pane', prezzo: 1.50, sbarrato: false },
{ prodotto: 'Latte', prezzo: 1.20, sbarrato: false },
{ prodotto: 'Uova', prezzo: 2.30, sbarrato: false },
{ prodotto: 'Mele', prezzo: 0.80, sbarrato: true },
{ prodotto: 'Caffè', prezzo: 3.50, sbarrato: false }
];
// Pre-esercizi: RIFERIMENTI AL DOM
// Seleziona gli elementi necessari che DEVI definire nell'HTML se mancano
const inputProdotto = document.querySelector('');
const inputPrezzo = document.querySelector('');
const btnAggiungi = document.querySelector('');
const listaSpesa = document.querySelector('');
const contenitoreTotale = document.querySelector('');
/**
* FUNZIONE 1: Visualizza/Aggiorna Lista
* Questa funzione è il "motore" grafico. Deve:
* 1. Pulire la lista attuale nel DOM
* 2. Ciclare l'array 'lista'
* 3. Per ogni elemento, chiamare la funzione 'creaElementoLista'
* 4. Chiamare la funzione 'aggiornaTotale' alla fine per ricalcolare il conto
*/
function aggiornaLista() {
}
/**
* FUNZIONE 2: Crea Elemento HTML (li)
* Questa funzione si occupa di creare il singolo pezzetto di HTML.
* Deve:
* 1. Creare un tag <li>
* 2. Impostare il testo (es. "Pane - 1.50 €")
* 3. Se l'elemento ha la proprietà .sbarrato === true, aggiungere la classe CSS 'preso'
* 4. Gestire il click: se clicco sull'li, devo chiamare la funzione toggleSbarrato(elemento)
* 5. Appendere l'li alla listaSpesa (ul)
*/
function creaElementoLista(elemento) {
}
/**
* FUNZIONE 3: Gestione Click (Toggle Sbarrato)
* Questa funzione viene chiamata quando clicco su una riga.
* Non modifica il DOM direttamente! Deve:
* 1. Cambiare la proprietà 'sbarrato' dell'oggetto (da true a false o viceversa)
* 2. Richiamare aggiornaLista() per ridisegnare tutto aggiornato
*/
function toggleSbarrato(elemento) {
}
/**
* FUNZIONE 4: Calcola Totale
* Deve:
* 1. Creare una variabile somma = 0
* 2. Ciclare l'array 'lista'
* 3. Sommare i prezzi
* 4. (Opzionale) Somma solo quelli NON sbarrati
* 5. Scrivere il risultato nel contenitoreTotale
*/
function aggiornaTotale() {
}
/**
* EVENTO PRINCIPALE: Click su Aggiungi
* 1. Leggere i valori degli input (value)
* Nota che il prezzo deve essere convertito in numero.
* Per farlo usa parseFloat(valore) o Number(valore)
* 2. Validazione: se i campi sono pieni e il prezzo > 0
* 3. Creare un nuovo oggetto { prodotto: ..., prezzo: ..., sbarrato: false }
* 4. Aggiungerlo all'array 'lista' (push)
* 5. Richiamare aggiornaLista()
* 6. Svuotare gli input
*/
btnAggiungi.addEventListener('click', function () {
});
// AVVIO
// Chiamata iniziale per mostrare i dati di esempio (Pane e Latte)
aggiornaLista();

112
javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/style.css Normal file
View File

@@ -0,0 +1,112 @@
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;
}
.container {
background: white;
width: 450px;
padding: 30px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.input-group {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
input {
padding: 12px;
border: 2px solid #eee;
background-color: #f9f9f9;
border-radius: 10px;
flex: 1;
font-size: 1rem;
transition: 0.3s;
}
input:focus {
border-color: #007bff;
background-color: #fff;
outline: none;
}
/* Facciamo l'input del prezzo un po' più piccolo */
input[type="number"] {
flex: 0 0 80px;
}
button {
padding: 12px 25px;
background: linear-gradient(135deg, #28a745 0%, #218838 100%);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
transition: transform 0.2s;
}
button:hover {
transform: translateY(-2px);
}
ul {
list-style: none;
padding: 0;
}
li {
background: #fff;
border: 1px solid #eee;
margin-bottom: 8px;
border-radius: 8px;
padding: 15px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.2s;
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
li:hover {
background-color: #f8f9fa;
transform: translateX(5px);
border-color: #007bff;
}
h1 {
text-align: center;
color: #333;
}
.totale-container {
text-align: right;
font-size: 1.2em;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
/* Stili per la lista */
/* ESERCIZIO CSS:
Aggiungi qui sotto la classe .preso
Deve avere:
- testo sbarrato (text-decoration: line-through)
- colore grigino
- sfondo un po' scuro
*/

43
javascript/JS_Esercizi 08 - DOM+/05_gestionale/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Gestionale Dipendenti</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>
<h1>Gestione Dipendenti</h1>
<div class="controls">
<div>
<h3>Aggiungi Nuovo</h3>
<input type="text" id="input-nome" placeholder="Nome">
<input type="text" id="input-ruolo" placeholder="Ruolo">
<button id="btn-aggiungi">Aggiungi</button>
</div>
<div>
<h3>Cerca</h3>
<input type="text" id="input-ricerca" placeholder="Cerca per nome...">
</div>
<div>
<!-- <h3>Azioni</h3> -->
<!-- Zona per extra bottoni futuri -->
</div>
</div>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Ruolo</th>
<th>Azioni</th>
</tr>
</thead>
<tbody id="tabella-corpo">
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>

137
javascript/JS_Esercizi 08 - DOM+/05_gestionale/script.js Normal file
View File

@@ -0,0 +1,137 @@
// DATI INIZIALI
const dipendenti = [
{ nome: "Mario Rossi", ruolo: "Sviluppatore" },
{ nome: "Luigi Bianchi", ruolo: "Sviluppatore" },
{ nome: "Paolo Gialli", ruolo: "Sviluppatore" },
{ nome: "Anna Neri", ruolo: "Sviluppatore" },
{ nome: "Carlo Verdi", ruolo: "Project Manager" },
{ nome: "Luca Bianchi", ruolo: "Designer" },
];
// RIFERIMENTI DOM
const tbody = document.querySelector('#tabella-corpo');
const btnAggiungi = document.querySelector('#btn-aggiungi');
const inputNome = document.querySelector('#input-nome');
const inputRuolo = document.querySelector('#input-ruolo');
const inputRicerca = document.querySelector('#input-ricerca');
/**
* FUNZIONE PRINCIPALE: Visualizza Tabella
* Questa funzione deve:
* - Pulire il contenuto del tbody
* - Per ogni dipendente nell'array passato come argomento:
* - Creare una riga (usando la funzione creaRiga)
* - Aggiungere la riga al tbody
*/
function visualizzaTabella(lista) {
}
/**
* FUNZIONE 1: Crea Riga
* Questa funzione deve:
* - Creare una riga (tr)
* - Creare 3 celle (td): Nome, Ruolo, Azioni
* - Popolare le celle Nome e Ruolo con i dati corretti
* - Nella cella Azioni, aggiungere un bottone "Elimina"
* - Aggiungere un event listener al bottone "Elimina" per rimuovere il dipendente dall'array e visualizzare la tabella
* - Aggiungere le tre celle alla riga
* - Aggiungere la riga al tbody
*
* Nota: Usare il metodo dipendenti.splice(i, 1) per rimuovere l'elemento dall'array
* e poi richiamare visualizzaTabella(dipendenti) per mostrare la tabella aggiornata.
*/
function creaRiga(dipendente, indice) {
}
/**
* FUNZIONE 2: Aggiungi Dipendente
* 1. Leggere i valori degli input
* 2. SE non sono vuoti:
* - Creare un oggetto { nome: ..., ruolo: ... }
* - Aggiungerlo all'array 'dipendenti'
* - Richiamare visualizzaTabella() per aggiornare la vista
* - Pulire gli input (settarli a stringa vuota)
*/
btnAggiungi.addEventListener('click', () => {
});
/**
* FUNZIONE 3: Ricerca
* 1. Leggere il testo nel campo ricerca
* 2. Filtrare l'array 'dipendenti' usando:
* - array.filter()
* - dipendente.nome.includes(testoRicerca)
* 3. Passare l'array filtrato a visualizzaTabella()
*/
inputRicerca.addEventListener('input', () => {
});
/**
* FUNZIONE 4: Emoji per Ruolo
* Aggiungere automaticamente un'emoji accanto al nome in base al ruolo.
*
* Passi:
* 1. Sviluppa la funzione getEmojiPerRuolo(ruolo) che ritorna:
* - "💻" per "Sviluppatore"
* - "🎨" per "Designer"
* - "👤" per altri ruoli
* 2. Modifica la funzione creaRiga per usare getEmojiPerRuolo
* 3. Usare la concatenazione stringhe per la cellaNome.textContent = emoji + " " + dipendente.nome;
*/
function getEmojiPerRuolo(ruolo) {
// Implementa la logica qui
}
// AVVIO
// Chiamare visualizzaTabella(dipendenti) all'inizio per mostrare i dati iniziali
visualizzaTabella(dipendenti);
/************************************************************************/
/************************* ESERCIZI EXTRA *******************************/
/************************************************************************/
/** ESERCIZIO EXTRA:
* Migliorare la funzione creaRiga per aggiungere una classe CSS speciale
* alle righe dei dipendenti che sono "Project Manager".
*
* Passi:
* 1. Aggiungi una classe .manager (o .evidenziato) che evidenzi la riga (es. background-color: #feffae;)
* 2. Modificare la funzione creaRiga:
* - Controllare se dipendente.ruolo === "Project Manager"
* - Se vero, aggiungere una classe CSS speciale alla riga (es. riga.classList.add('manager'))
*/
/** ESERCIZIO EXTRA 2:
* Aggiungere nel file index.html un bottone "Elimina Tutti" sopra la tabella.
*
* Passi:
* 1. Aggiungere il bottone con un id specifico (es. id="btn-elimina-tutti")
* 2. Stilizzare il bottone con CSS se necessario (colore rosso per esempio)
* 3. Aggiungere un event listener al bottone nel file script.js
* 4. Nell'event listener, svuotare l'array dipendenti (es. dipendenti.length = 0)
* 5. Richiamare visualizzaTabella(dipendenti) per aggiornare la vista
*/
/**
* ESERCIZIO EXTRA 3:
* Aggiungere un contatore sopra la tabella che mostra il numero totale di dipendenti.
*
* Passi:
* 1. Aggiungere un elemento HTML (es. un div o span) con un id specifico (es. id="contatore-dipendenti")
* 2. Mettere questo elemento sopra la tabella e stilizzarlo con CSS (metterlo almeno a destra)
* 3. Creare una funzione aggiornaContatore()
* - Questa funzione deve aggiornare il contenuto dell'elemento contatore con il numero di dipendenti (es. dipendenti.length)
* 4. Chiamare aggiornaContatore() ogni volta che la tabella viene aggiornata (dopo aggiungere, eliminare, o filtrare dipendenti)
*/

114
javascript/JS_Esercizi 08 - DOM+/05_gestionale/style.css Normal file
View File

@@ -0,0 +1,114 @@
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;
justify-content: center;
align-items: center;
color: #2c3e50;
display: block;
padding: 40px;
}
.controls {
background: white;
padding: 25px;
border-radius: 15px;
border: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
margin-bottom: 30px;
}
/* Esempio di combinatore figlio diretto (>) */
.controls > div {
border-bottom: 1px solid #f0f0f0;
}
.controls > div:last-child {
border-bottom: none;
}
input[type="text"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
background: #f9f9f9;
}
button {
padding: 10px 20px;
background-color: #007bff; /* Blu base */
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
table {
width: 100%;
border-collapse: separate; /* Necessario per border-radius sulla tabella */
border-spacing: 0;
margin-top: 20px;
background: white;
border-radius: 15px;
overflow: hidden; /* Taglia gli angoli */
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
th {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
padding: 15px;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 1px;
border: none;
}
td {
border-bottom: 1px solid #eee;
padding: 15px;
color: #555;
}
tr:last-child td {
border-bottom: none;
}
/************************************************************/
/* ESERCIZI CSS: "RECUPERA GLI STILI PERSI" */
/* Usa solo selettori di TAG, ID (#), CLASSI (.) */
/* e combinatori di SPAZIO (discendente) */
/************************************************************/
/* LIVELLO 1: Il bottone Elimina (Discendenza)
Il bottone "Elimina" non ha classi, ma sappiamo che sta DENTRO il tbody.
Seleziona tutti i button che sono dentro il #tabella-corpo.
Obiettivo: Sfondo rosso (#ff4444), testo bianco, nessun bordo.
*/
/* LIVELLO 2: Interattività (Hover su discendente)
Vogliamo che il bottone elimina diventi più scuro quando ci passi sopra.
Obiettivo: Cambia il background-color in #cc0000 al passaggio del mouse.
Suggerimento: usa lo stesso selettore di prima + :hover
*/
/* LIVELLO 3: Leggibilità Riga (Hover su riga)
Vogliamo evidenziare tutta la riga (tr) della tabella quando il mouse ci passa sopra.
ATTENZIONE: Deve succedere solo nel corpo della tabella, non nell'intestazione!
Obiettivo: Background-color grigio chiaro (#f1f1f1) al passaggio del mouse sulla riga.
*/
/* LIVELLO 4 (Extra): Focus sugli Input
Vogliamo evidenziare gli input di testo quando l'utente ci clicca dentro (:focus).
Ma solo quelli dentro la zona .controls!
Obiettivo: Bordo blu (2px solid blue) e sfondo giallo chiaro (#ffffe0).
*/

106
javascript/JS_Esercizi 08 - DOM+/index.html Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hub Esercizi DOM</title>
<style>
/* RESET & BASE */
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); margin: 0; padding: 40px; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
/* CONTENITORE PRINCIPALE */
.hub-container { background: white; width: 100%; max-width: 600px; padding: 40px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
h1 { text-align: center; color: #333; margin-bottom: 10px; font-size: 2.5rem; }
p.subtitle { text-align: center; color: #666; margin-bottom: 40px; font-size: 1.1rem; }
/* LISTA CARD */
.exercise-list { display: flex; flex-direction: column; gap: 20px; }
/* CARD ESERCIZIO */
.card { display: flex; align-items: center; text-decoration: none; background: #fff; border: 2px solid #eee; border-radius: 12px; padding: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; }
.card:hover { transform: translateY(-5px); border-color: #007bff; box-shadow: 0 10px 20px rgba(0,123,255,0.15); }
/* ICONA E TESTI */
.icon { font-size: 2.5rem; margin-right: 20px; width: 50px; text-align: center; }
.info { flex: 1; }
.info h3 { margin: 0 0 5px 0; color: #2c3e50; font-size: 1.2rem; }
.info p { margin: 0; color: #7f8c8d; font-size: 0.9rem; }
/* TAG DIFFICOLTA' */
.badge { font-size: 0.75rem; font-weight: bold; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 1px; margin-left: 10px; white-space: nowrap; }
.easy { background-color: #e8f5e9; color: #2e7d32; } /* Verde */
.medium { background-color: #fff3e0; color: #ef6c00; } /* Arancione */
.hard { background-color: #ffebee; color: #c62828; } /* Rosso */
/* FRECCIA AL PASSAGGIO DEL MOUSE */
.arrow { font-size: 1.5rem; color: #ccc; transition: 0.3s; }
.card:hover .arrow { color: #007bff; transform: translateX(5px); }
</style>
</head>
<body>
<div class="hub-container">
<h1>Esercizi DOM</h1>
<p class="subtitle">Corso Web Developer</p>
<div class="exercise-list">
<a href="00_ripasso/index.html" class="card">
<div class="icon"></div>
<div class="info">
<h3>0. Ripasso DOM <span class="badge easy">Base</span></h3>
<p>Selettori, manipolazione base del DOM.</p>
</div>
<div class="arrow">→</div>
</a>
<a href="01_profilo/index.html" class="card">
<div class="icon">👤</div>
<div class="info">
<h3>1. Profilo Utente <span class="badge easy">Base</span></h3>
<p>Manipolazione statica, Oggetti e attributi.</p>
</div>
<div class="arrow">→</div>
</a>
<a href="02_card_profilo/index.html" class="card">
<div class="icon">🆕</div>
<div class="info">
<h3>2. Creazione Card Utente <span class="badge easy">Base+</span></h3>
<p>Form, createElement, appendChild.</p>
</div>
<div class="arrow">→</div>
</a>
<a href="03_lista_semplice/index.html" class="card">
<div class="icon">📝</div>
<div class="info">
<h3>3. Lista Semplice <span class="badge medium">Intermedio</span></h3>
<p>Cicli, Array, Creazione elementi in loop.</p>
</div>
<div class="arrow">→</div>
</a>
<a href="04_lista_spesa/index.html" class="card">
<div class="icon">🛒</div>
<div class="info">
<h3>4. Lista Spesa <span class="badge medium">Intermedio+</span></h3>
<p>Array, Cicli, Add/Remove, Totali.</p>
</div>
<div class="arrow">→</div>
</a>
<a href="05_gestionale/index.html" class="card">
<div class="icon">💼</div>
<div class="info">
<h3>5. Gestionale <span class="badge hard">Avanzato</span></h3>
<p>Tabelle, Filtri di ricerca, aggiunta/rimozione.</p>
</div>
<div class="arrow">→</div>
</a>
</div>
</div>
</body>
</html>