+
🎓 Ripasso DOM - Step by Step
+
Selettori, Manipolazione Testo, Eventi
+
+
+
+
Step 1️⃣ - Selettori CSS
+
Impara a selezionare elementi dal DOM usando querySelector
+
+
+
Esercizio 1.1: Seleziona per ID
+
Questo elemento ha un ID
+
Aspettando...
+
+
+
+
Esercizio 1.2: Seleziona per Classe
+
Sono blu
+
Anche io sono blu
+
Aspettando...
+
+
+
+
Esercizio 1.3: Seleziona per Tag
+
Sono uno span
+
Sono un altro span
+
Aspettando...
+
+
+
+
+
+
Step 2️⃣ - Manipolazione Testo
+
Cambia il contenuto dei tag usando textContent
+
+
+
Esercizio 2.1: Cambia Testo in un Paragrafo
+
Clicca il bottone qui sotto per cambiarmi!
+
Cambia Testo
+
Aspettando...
+
+
+
+
Esercizio 2.2: Scrivi nel DOM
+
+
Scrivi nel DOM
+
Aspettando...
+
+
+
+
Esercizio 2.3: Testo Dinamico
+
+
Saluta
+
+
Aspettando...
+
+
+
+
+
+
Step 3️⃣ - Eventi
+
Rispondi ai click dell'utente e agli input
+
+
+
Esercizio 3.1: Click Semplice
+
Cliccami!
+
Click: 0
+
Aspettando...
+
+
+
+
Esercizio 3.2: Input Event
+
Scrivi qualcosa e vedi il risultato in tempo reale:
+
+
Qui apparirà quello che scrivi...
+
Aspettando...
+
+
+
+
Esercizio 3.3: Click su Elemento Specifico
+
Box 1
+
Box 2
+
Box 3
+
Log click:
+
Aspettando...
+
+
+
+
Esercizio 3.4: Toggle Classe CSS (Bonus)
+
Clicca su di me per cambiarmi
+
Aspettando...
+
+
+
+
+
+
✅ Riepilogo
+
Completa gli esercizi per vedere il riepilogo...
+
+
usando document.querySelector
+ * 2. Leggi il suo textContent
+ * 3. Aggiorna il paragrafo con id="risultato-1-3" scrivendo "✅ Span trovato: " + il testo
+ */
+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! ✨"
+ * - Aggiorna il risultato a "✅ Testo cambato"
+ */
+function esercizio_2_1() {
+ const btn = document.querySelector('');
+ const paragrafo = document.querySelector('');
+ const risultato = document.querySelector('#risultato-2-1');
+
+ if (btn && paragrafo) {
+ btn.addEventListener('click', () => {
+ paragrafo.textContent
+ risultato.textContent
+ });
+ }
+}
+
+
+/**
+ * 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 con il testo "Riga aggiunta al DOM!"
+ * - Usa append() per aggiungere il paragrafo al div
+ * - Aggiorna il risultato a "✅ Elemento aggiunto"
+ */
+function esercizio_2_2() {
+ const btn = document.querySelector('');
+ const area = document.querySelector('');
+ const risultato = document.querySelector('#risultato-2-2');
+
+ if (btn && area) {
+ btn.addEventListener('click', () => {
+ const nuovoParagrafo = document.createElement('');
+ nuovoParagrafo.textContent
+ risultato.textContent
+
+ });
+ }
+}
+
+
+/**
+ * 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]! 👋"
+ * - Aggiorna il risultato a "✅ Saluto inviato"
+ */
+function esercizio_2_3() {
+ const input = document.querySelector('');
+ const btn = document.querySelector('');
+ const area = document.querySelector('');
+ const risultato = document.querySelector('#risultato-2-3');
+
+ if (input && btn && area) {
+ btn.addEventListener('click', () => {
+ const nome = ''; // Leggi il valore dall'input
+ area.textContent
+ risultato.textContent
+ });
+ }
+}
+
+
+// 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. Crea una variabile 'count' = 0 fuori dalla funzione
+ * 4. Aggiungi un event listener che, al click:
+ * - Incrementa count (count++)
+ * - Aggiorna il testo mostrando "Click: " + count
+ * - Aggiorna il risultato a "✅ Contatore attivo"
+ */
+let count = 0; // Variabile globale
+
+function esercizio_3_1() {
+ const btn = document.querySelector('');
+ const contatore = document.querySelector('');
+ const risultato = document.querySelector('#risultato-3-1');
+
+ if (btn && contatore) {
+ btn.addEventListener('click', () => {
+
+ });
+ }
+}
+
+
+/**
+ * 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..."
+ * - Aggiorna il risultato a "✅ Echo attivo"
+ *
+ * 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('');
+ const risultato = document.querySelector('#risultato-3-2');
+
+ if (input && echo) {
+ input.addEventListener('input', (event) => {
+
+ });
+ }
+}
+
+
+/**
+ * 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)
+ * - Aggiungi al log-click: "[id del box] cliccato\n"
+ * - Aggiorna il risultato a "✅ Log attivo"
+ *
+ * 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('');
+ const risultato = document.querySelector('#risultato-3-3');
+
+ if (boxes.length > 0) {
+ boxes.forEach((box) => {
+ box.addEventListener('click', (event) => {
+
+ });
+ });
+ }
+}
+
+
+/**
+ * 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
+ * - Aggiorna il risultato a "✅ Toggle attivo"
+ *
+ * Nota: Assicurati che in style.css esista una classe .elemento-attivo
+ */
+function esercizio_3_4() {
+ const elemento = document.querySelector(''); // Selector per l'elemento
+ const risultato = document.querySelector('#risultato-3-4');
+
+ if (elemento) {
+ elemento.addEventListener('click', () => {
+
+ });
+ }
+}
+
+
+// Eseguire gli esercizi 3.x
+esercizio_3_1();
+esercizio_3_2();
+esercizio_3_3();
+esercizio_3_4();
+
+
+// ============ RIEPILOGO ============
+
+/**
+ * Controlla quanti esercizi sono stati completati
+ * Aggiorna il messaggio di riepilogo
+ */
+function aggiornaRiepilogo() {
+ const risultati = document.querySelectorAll('.risultato');
+ const completati = Array.from(risultati).filter(r => r.textContent.includes('✅')).length;
+ const totale = risultati.length;
+
+ const status = document.querySelector('#status-completamento');
+ if (completati === totale) {
+ status.textContent = `✨ Fantastico! Hai completato tutti gli ${totale} esercizi! ✨`;
+ status.style.color = '#27ae60';
+ status.style.fontSize = '1.2rem';
+ status.style.fontWeight = 'bold';
+ } else {
+ status.textContent = `Completati ${completati}/${totale} esercizi. Continua!`;
+ }
+}
+
+// Aggiorna il riepilogo ogni 500ms per vedere i progressi in tempo reale
+setInterval(aggiornaRiepilogo, 500);
+aggiornaRiepilogo();
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/00_ripasso/style.css b/JS_Esercizi/JS_Esercizi 08 - DOM+/00_ripasso/style.css
new file mode 100644
index 0000000..3eedd5a
--- /dev/null
+++ b/JS_Esercizi/JS_Esercizi 08 - DOM+/00_ripasso/style.css
@@ -0,0 +1,215 @@
+/* ============================================================
+ 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;
+ color: #555;
+ font-size: 0.9rem;
+}
+
+/* ============ 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 ============ */
+
+.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);
+}
+
+/* ============ 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);
+}
+
+/* ============ RIEPILOGO ============ */
+#riepilogo {
+ background: #f8fafb;
+ color: #2c3e50;
+ padding: 20px;
+ border-radius: 5px;
+ text-align: center;
+ border-bottom: none;
+ border-left: none;
+ border: 1px solid #d5d8dc;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ border-bottom: none;
+ border-left: none;
+}
+
+.riepilogo h2 {
+ color: #2c3e50;
+ font-size: 1.4rem;
+ margin-top: 0;
+}
+
+#status-completamento {
+ font-size: 1rem;
+ color: #2c3e50;
+ transition: all 0.3s ease;
+}
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/01_card_profilo/index.html b/JS_Esercizi/JS_Esercizi 08 - DOM+/01_profilo/index.html
similarity index 100%
rename from JS_Esercizi/JS_Esercizi 08 - DOM+/01_card_profilo/index.html
rename to JS_Esercizi/JS_Esercizi 08 - DOM+/01_profilo/index.html
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/01_card_profilo/script.js b/JS_Esercizi/JS_Esercizi 08 - DOM+/01_profilo/script.js
similarity index 100%
rename from JS_Esercizi/JS_Esercizi 08 - DOM+/01_card_profilo/script.js
rename to JS_Esercizi/JS_Esercizi 08 - DOM+/01_profilo/script.js
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/01_card_profilo/style.css b/JS_Esercizi/JS_Esercizi 08 - DOM+/01_profilo/style.css
similarity index 100%
rename from JS_Esercizi/JS_Esercizi 08 - DOM+/01_card_profilo/style.css
rename to JS_Esercizi/JS_Esercizi 08 - DOM+/01_profilo/style.css
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/index.html b/JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/index.html
new file mode 100644
index 0000000..dddfbe3
--- /dev/null
+++ b/JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/index.html
@@ -0,0 +1,35 @@
+
+
+
+ Profilo Utente
+ ← Dashboard
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/script.js b/JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/script.js
new file mode 100644
index 0000000..3c8b050
--- /dev/null
+++ b/JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/script.js
@@ -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 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 () {
+});
+
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/style.css b/JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/style.css
new file mode 100644
index 0000000..e17aecd
--- /dev/null
+++ b/JS_Esercizi/JS_Esercizi 08 - DOM+/02_card_profilo/style.css
@@ -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;
+}
\ No newline at end of file
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/03_lista_semplice/index.html b/JS_Esercizi/JS_Esercizi 08 - DOM+/03_lista_semplice/index.html
new file mode 100644
index 0000000..dfff013
--- /dev/null
+++ b/JS_Esercizi/JS_Esercizi 08 - DOM+/03_lista_semplice/index.html
@@ -0,0 +1,37 @@
+
+
+
+ 01 - Lista Semplice
+ ← Dashboard
+
+
+
Lista Semplice
+
Crea liste dinamicamente usando cicli e DOM
+
+
+
+
+
+ * 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
+ * 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
+ * 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();
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/03_lista_semplice/style.css b/JS_Esercizi/JS_Esercizi 08 - DOM+/03_lista_semplice/style.css
new file mode 100644
index 0000000..c73713b
--- /dev/null
+++ b/JS_Esercizi/JS_Esercizi 08 - DOM+/03_lista_semplice/style.css
@@ -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;
+}
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/02_lista_spesa/index.html b/JS_Esercizi/JS_Esercizi 08 - DOM+/04_lista_spesa/index.html
similarity index 100%
rename from JS_Esercizi/JS_Esercizi 08 - DOM+/02_lista_spesa/index.html
rename to JS_Esercizi/JS_Esercizi 08 - DOM+/04_lista_spesa/index.html
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/02_lista_spesa/script.js b/JS_Esercizi/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js
similarity index 100%
rename from JS_Esercizi/JS_Esercizi 08 - DOM+/02_lista_spesa/script.js
rename to JS_Esercizi/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/02_lista_spesa/style.css b/JS_Esercizi/JS_Esercizi 08 - DOM+/04_lista_spesa/style.css
similarity index 100%
rename from JS_Esercizi/JS_Esercizi 08 - DOM+/02_lista_spesa/style.css
rename to JS_Esercizi/JS_Esercizi 08 - DOM+/04_lista_spesa/style.css
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/03_gestionale/index.html b/JS_Esercizi/JS_Esercizi 08 - DOM+/05_gestionale/index.html
similarity index 100%
rename from JS_Esercizi/JS_Esercizi 08 - DOM+/03_gestionale/index.html
rename to JS_Esercizi/JS_Esercizi 08 - DOM+/05_gestionale/index.html
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/03_gestionale/script.js b/JS_Esercizi/JS_Esercizi 08 - DOM+/05_gestionale/script.js
similarity index 100%
rename from JS_Esercizi/JS_Esercizi 08 - DOM+/03_gestionale/script.js
rename to JS_Esercizi/JS_Esercizi 08 - DOM+/05_gestionale/script.js
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/03_gestionale/style.css b/JS_Esercizi/JS_Esercizi 08 - DOM+/05_gestionale/style.css
similarity index 100%
rename from JS_Esercizi/JS_Esercizi 08 - DOM+/03_gestionale/style.css
rename to JS_Esercizi/JS_Esercizi 08 - DOM+/05_gestionale/style.css
diff --git a/JS_Esercizi/JS_Esercizi 08 - DOM+/index.html b/JS_Esercizi/JS_Esercizi 08 - DOM+/index.html
index 539ec8d..80251ca 100644
--- a/JS_Esercizi/JS_Esercizi 08 - DOM+/index.html
+++ b/JS_Esercizi/JS_Esercizi 08 - DOM+/index.html
@@ -44,10 +44,17 @@
Esercizi DOM
Corso Web Developer
-
+
+
+
+
0. Ripasso DOM Base
+
Selettori, manipolazione base del DOM.
+
→
+
-
+
👤
1. Profilo Utente Base
@@ -56,20 +63,38 @@
→
-
- 🛒
+
+ 🆕
-
2. Lista Spesa Intermedio
-
Array, Cicli, Creazione elementi e Totali.
+
2. Creazione Card Utente Base+
+
Form, createElement, appendChild.
→
-
+
+ 📝
+
+
3. Lista Semplice Intermedio
+
Cicli, Array, Creazione elementi in loop.
+
→
+
+
+
+ 🛒
+
+
4. Lista Spesa Intermedio+
+
Array, Cicli, Add/Remove, Totali.
+
→
+
+
+
💼
-
3. Gestionale Avanzato
-
Tabelle, Filtri di ricerca, aggiunta/rimozione dipendenti.
+
5. Gestionale Avanzato
+
Tabelle, Filtri di ricerca, aggiunta/rimozione.
→