From b14fc4632a01afd552471815074f67574bf20146 Mon Sep 17 00:00:00 2001 From: Berack96 Date: Fri, 6 Feb 2026 12:04:01 +0100 Subject: [PATCH] Esercizio 10 - fix e aggiunta es --- .../JS_Esercizi 10 - localStorage/index.html | 10 +- .../spese/index.html | 54 ++++ .../spese/script.js | 239 ++++++++++++++++++ .../spese/style.css | 167 ++++++++++++ .../watchlist/script.js | 15 +- 5 files changed, 479 insertions(+), 6 deletions(-) create mode 100644 javascript/JS_Esercizi 10 - localStorage/spese/index.html create mode 100644 javascript/JS_Esercizi 10 - localStorage/spese/script.js create mode 100644 javascript/JS_Esercizi 10 - localStorage/spese/style.css diff --git a/javascript/JS_Esercizi 10 - localStorage/index.html b/javascript/JS_Esercizi 10 - localStorage/index.html index af2b6bd..29b919e 100644 --- a/javascript/JS_Esercizi 10 - localStorage/index.html +++ b/javascript/JS_Esercizi 10 - localStorage/index.html @@ -188,10 +188,18 @@
šŸ“ŗ
-

Watchlist (Film/Serie) Medio

+

Watchlist (Film/Serie) Facile

Aggiungi film, salva con localStorage, rimuovi dalla lista

 + + +
šŸ’°
+
+

Gestore Spese Facile

+

Aggiungi spese per categoria, calcola statistiche, salva e visualizza

+
+ diff --git a/javascript/JS_Esercizi 10 - localStorage/spese/index.html b/javascript/JS_Esercizi 10 - localStorage/spese/index.html new file mode 100644 index 0000000..e08a180 --- /dev/null +++ b/javascript/JS_Esercizi 10 - localStorage/spese/index.html @@ -0,0 +1,54 @@ + + + + + Gestore Spese + + + + ā† Dashboard + +

šŸ’° Gestore Spese

+ +
+ + + + +
+ +
+
+ Totale + ā‚¬ 0.00 +
+
+ NĀ° Spese + 0 +
+
+ Media + ā‚¬ 0.00 +
+
+ +

Spese per Categoria

+
+ +
+ +
+ +
+ + + + diff --git a/javascript/JS_Esercizi 10 - localStorage/spese/script.js b/javascript/JS_Esercizi 10 - localStorage/spese/script.js new file mode 100644 index 0000000..6ce152d --- /dev/null +++ b/javascript/JS_Esercizi 10 - localStorage/spese/script.js @@ -0,0 +1,239 @@ +/** + * ESERCIZIO: Gestore Spese con localStorage + * + * OBIETTIVO: + * Creare un'app che permette all'utente di aggiungere spese, salvarle in localStorage, + * visualizzarle per categoria e calcolare statistiche. + * + * STRUTTURA DATI: + * Array di oggetti spese: + * [ + * { id: 1, categoria: "Cibo", importo: 25.50, descrizione: "Cena", data: "2026-02-06" }, + * { id: 2, categoria: "Trasporti", importo: 5.00, descrizione: "Benzina", data: "2026-02-06" } + * ] + */ + +// SELEZIONE ELEMENTI DOM +const selectCategoria = document.querySelector('#categoria'); +const inputImporto = document.querySelector('#importo'); +const inputDescrizione = document.querySelector('#descrizione'); +const btnAggiungi = document.querySelector('#btnAggiungi'); +const btnRipristina = document.querySelector('#btnRipristina'); +const btnEsporta = document.querySelector('#btnEsporta'); + +// STATO DELL'APP con alcuni esempi iniziali (per testare, da rimuovere o modificare in seguito) +let spese = [ + { id: 1, categoria: "Cibo", importo: 25.50, descrizione: "Cena", data: "2026-02-06" }, + { id: 2, categoria: "Trasporti", importo: 5.00, descrizione: "Benzina", data: "2026-02-06" }, + { id: 3, categoria: "Cibo", importo: 15.00, descrizione: "Pranzo", data: "2026-02-05" } +]; +let ultimoId = 0; + + +/** + * FUNZIONE 1: Carica le spese dal localStorage + * + * Passi: + * 1. Controlla se esiste la chiave "spese" in localStorage + * 2. Se esiste, parsa il JSON e assegna a 'spese' + * 3. Se esiste, trova il massimo ID per continuare da lƬ con ultimoId + * 4. Se non esiste, lascia spese come array vuoto + * 5. Chiama visualizzaLista() per mostrare i dati + */ +function caricaSpeseStorage() { +} + + +/** + * FUNZIONE 2: Salva tutte le spese nel localStorage + * + * Passi: + * 1. Converti l'array 'spese' in JSON con JSON.stringify() + * 2. Salva la stringa JSON in localStorage con chiave "spese" + */ +function salvaSpeseStorage() { +} + + +/** + * FUNZIONE 3: Aggiungi una nuova spesa + * + * Passi: + * 1. Leggi i valori dagli input (categoria, importo, descrizione) + * 2. Valida che categoria sia selezionata e importo > 0 + * 3. Se non valido, mostra un alert e fermati + * 4. Crea un oggetto spesa con: + * - id: incrementa ultimoId e usa il nuovo valore + * - categoria: il valore selezionato + * - importo: converti a numero float + * - descrizione: il valore dell'input + * - data: la data odierna in formato "YYYY-MM-DD" (usa new Date()) + * 5. Aggiungi l'oggetto all'array 'spese' + * 6. Salva con salvaSpeseStorage() + * 7. Svuota gli input + * 8. Chiama visualizzaLista() per aggiornare l'UI + */ +function aggiungiSpesa() { +} + + +/** + * FUNZIONE 4: Elimina una spesa per indice + * + * Passi: + * 1. Rimuovi l'elemento dall'array 'spese' usando splice(indice, 1) + * 2. Salva con salvaSpeseStorage() + * 3. Chiama visualizzaLista() per aggiornare l'UI + */ +function eliminaSpesa(indice) { +} + + +/** + * FUNZIONE 5: Calcola le statistiche + * + * Passi: + * 1. Calcola il totale sommando tutti gli importi + * 2. Conta il numero di spese + * 3. Calcola la media: totale / numerospese (se numero > 0, altrimenti 0) + * 4. Ritorna un oggetto con { totale, numero, media } + */ +function calcolaStatistiche() { + let totale = 0; + let numero = 0; + let media = 0; + + // TODO: Calcoli qui + + return { + totale: totale, + numero: numero, + media: media + }; +} + + +/** + * FUNZIONE 6: Raggruppa spese per categoria + * + * Passi: + * 1. Crea un oggetto vuoto: { } + * 2. Per ogni spesa nell'array, aggiungi la categoria come chiave + * 3. Se la categoria non esiste ancora, crea un array vuoto + * 4. Aggiungi la spesa all'array della categoria + * 5. Ritorna l'oggetto raggruppato + * + * Risultato atteso: + * { + * "Cibo": [spesa1, spesa2], + * "Trasporti": [spesa3], + * ... + * } + */ +function raggruppaSpesePerCategoria() { + let categorie = {}; + spese.forEach(spesa => { + if (!categorie[spesa.categoria]) { + categorie[spesa.categoria] = []; + } + categorie[spesa.categoria].push(spesa); + }); + + return categorie; +} + + +/** + * FUNZIONE 7: Visualizza e aggiorna tutta l'interfaccia + * + * Passi: + * 1. Chiama calcolaStatistiche() e salva il risultato + * 2. Aggiorna i valori HTML: + * - '#totaleSpese' con il totale formattato (2 decimali) + * - '#numeroSpese' con il numero di spese + * - '#mediaSpesa' con la media formattata (2 decimali) + * 3. Chiama raggruppaSpesePerCategoria() per ottenere le categorie + * 4. Pulisci il contenuto di '#categorieStime' + * 5. Per ogni categoria raggruppata: + * - Crea un div con classe 'categoria-card' + * - Aggiungi un header con il nome categoria e totale + * - Aggiungi una lista (