diff --git a/javascript/JS_Esercizi 08 - DOM+/00_ripasso/index.html b/javascript/JS_Esercizi 08 - DOM+/00_ripasso/index.html index 81bb8a2..6fb8e52 100644 --- a/javascript/JS_Esercizi 08 - DOM+/00_ripasso/index.html +++ b/javascript/JS_Esercizi 08 - DOM+/00_ripasso/index.html @@ -3,7 +3,7 @@ - Ripasso DOM - Step by Step + Ripasso DOM diff --git a/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/index.html b/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/index.html index dddfbe3..ec5d1b9 100644 --- a/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/index.html +++ b/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/index.html @@ -3,7 +3,7 @@ - Profilo Utente + Creazione Utente diff --git a/javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/index.html b/javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/index.html index dfff013..f417e17 100644 --- a/javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/index.html +++ b/javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/index.html @@ -3,7 +3,7 @@ - 01 - Lista Semplice + Lista Semplice diff --git a/javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/script.js b/javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/script.js index 01f0922..33be044 100644 --- a/javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/script.js +++ b/javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/script.js @@ -39,11 +39,14 @@ function popolaLibri() { * 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 + * 4. Se l'attività è completata (completato: true), aggiungi la classe 'completato' all'li + * 5. Aggiungi un evento click che: + * - Modifica la proprietà 'completato' dell'oggetto invertendo il suo valore (true/false) + * - Fai il toggle della classe 'completato' sull'elemento
  • per riflettere lo stato di completamento + * 6. Aggiungi l'li alla lista nel DOM */ const todo = [ - { testo: 'Studiare JavaScript', completato: false }, + { testo: 'Studiare JavaScript', completato: true }, { testo: 'Fare esercizi sul DOM', completato: false }, { testo: 'Creare un progetto', completato: false }, { testo: 'Rivedere il codice', completato: false } diff --git a/javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js b/javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js index 2386f16..4d78aee 100644 --- a/javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js +++ b/javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js @@ -9,25 +9,26 @@ let lista = [ { prodotto: 'Caffè', prezzo: 3.50, sbarrato: false } ]; -// Pre-esercizi: RIFERIMENTI AL DOM -// Seleziona gli elementi necessari che DEVI definire nell'HTML se mancano +// ESERCIZIO: Assicurati di avere questi elementi nel tuo HTML +// poi selezionali qui con querySelector. +// Gli ID potranno essere a tua scelta, ma devono essere univoci e chiari. +// Se l'elemento non esiste nell'HTML, aggiungilo tu. Es. const inputProdotto = document.querySelector(''); const inputPrezzo = document.querySelector(''); const btnAggiungi = document.querySelector(''); -const listaSpesa = document.querySelector(''); -const contenitoreTotale = document.querySelector(''); +const ulSpesa = document.querySelector(''); +const divTotale = document.querySelector(''); /** * FUNZIONE 1: Visualizza/Aggiorna Lista * Questa funzione è il "motore" grafico. Deve: - * 1. Pulire la lista attuale nel DOM + * 1. Pulire la lista attuale nel DOM (per evitare duplicati) * 2. Ciclare l'array 'lista' * 3. Per ogni elemento, chiamare la funzione 'creaElementoLista' - * 4. Chiamare la funzione 'aggiornaTotale' alla fine per ricalcolare il conto + * 4. Chiamare la funzione 'aggiornaTotale' alla fine per calcolare il conto */ function aggiornaLista() { - } @@ -38,23 +39,13 @@ function aggiornaLista() { * 1. Creare un tag
  • * 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) + * 4. Gestire il click se clicco sull'li: + * - Invertire la proprietà .sbarrato dell'oggetto (true/false) + * - Aggiornare la classe CSS 'preso' sull'li (toggle) + * - Aggiornare il totale chiamando aggiornaTotale() + * 5. Appendere l'li alla ulSpesa (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) { - } @@ -63,12 +54,10 @@ function toggleSbarrato(elemento) { * 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 + * 3. Sommare i prezzi (Attenzione: farlo solo per quelli che NON sono sbarrati, cioè sbarrato: false) + * 4. Scrivere il risultato nel divTotale */ function aggiornaTotale() { - } @@ -84,10 +73,9 @@ function aggiornaTotale() { * 6. Svuotare gli input */ btnAggiungi.addEventListener('click', function () { - }); // AVVIO // Chiamata iniziale per mostrare i dati di esempio (Pane e Latte) -aggiornaLista(); \ No newline at end of file +aggiornaLista(); diff --git a/javascript/JS_Esercizi 08 - DOM+/index.html b/javascript/JS_Esercizi 08 - DOM+/index.html index 974aed1..0222503 100644 --- a/javascript/JS_Esercizi 08 - DOM+/index.html +++ b/javascript/JS_Esercizi 08 - DOM+/index.html @@ -3,7 +3,7 @@ - Hub Esercizi DOM + Esercizi DOM