Tutti gli altri (6-10)

2026-02-03 00:08:30 +01:00
parent 0043f1f83f
commit e6f6f17769
54 changed files with 3205 additions and 0 deletions
--- a/localStorage/watchlist/index.html
+++ b/localStorage/watchlist/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <title>La Mia Watchlist</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>🎬 Film da Vedere</h1>
+    
+    <div class="input-group">
+        <input type="text" id="titolo" placeholder="Titolo film">
+        <input type="number" id="anno" placeholder="Anno" style="max-width: 80px;">
+        <button id="btn-add">Aggiungi</button>
+    </div>
+
+    <ul id="lista-film">
+        <!-- I film verranno aggiunti qui dinamicamente -->
+    </ul>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/localStorage/watchlist/script.js
+++ b/localStorage/watchlist/script.js
@@ -0,0 +1,109 @@
+/**
+ * Esercizio: Watchlist Film
+ * 
+ * CONTESTO:
+ * Abbiamo un HTML con due input (titolo, anno) e una lista vuota.
+ * Vogliamo salvare la lista dei film da vedere nel browser.
+ * 
+ * STRUTTURA DATI:
+ * Array di oggetti: [{ titolo: "Dune", anno: "2021" }, ...]
+ * 
+ * ISTRUZIONI:
+ * 1. Completa 'caricaFilm' per leggere dal localStorage (o inizializzare array vuoto).
+ * 2. Completa 'aggiungiFilm' per aggiornare l'array, salvarlo e aggiornare la UI.
+ * 3. Usa JSON.parse e JSON.stringify.
+ */
+
+// RIFERIMENTI DOM
+const inputTitolo = document.querySelector('#titolo');
+const inputAnno = document.querySelector('#anno');
+const listaFilm = document.querySelector('#lista-film');
+const btnAdd = document.querySelector('#btn-add');
+
+// STATO DELL'APP
+let filmWatchlist = [];
+
+/**
+ * STEP 1: Funzione Renderizza (visualizza) la lista
+ * Pulisce l'HTML e ricrea gli elementi basandosi sull'array filmWatchlist
+ * 1. Pulisci il contenuto di 'listaFilm'.
+ * 2. Per ogni film in 'filmWatchlist', crea un <li> con dentro --> <p>titolo (anno)</p>
+ * 3. Aggiungi l'<li> a 'listaFilm'.
+ */
+function visualizzaLista() {
+    // TODO: Scrivi qui il codice per visualizzare la lista...
+}
+
+/**
+ * STEP 2: Caricamento Iniziale
+ * Leggi la chiave "my_watchlist" dal localStorage.
+ * Se esiste, parsa la stringa e riempi l'array 'filmWatchlist'.
+ * Se non esiste, lascia l'array vuoto.
+ * Infine chiama visualizzaLista().
+ */
+function inizializzaApp() {
+    // TODO: Scrivi qui il codice per caricare i dati...
+}
+
+/**
+ * STEP 3: Aggiunta e Salvataggio
+ * Quando l'utente clicca "Aggiungi Film":
+ * 1. Cattura i valori dagli input.
+ * 2. Crea un oggetto film solo se entrambi i campi hanno un valore.
+ * 3. Crea un oggetto con i dati degli input.
+ * 4. Pushalo nell'array filmWatchlist.
+ * 5. Salva l'intero array aggiornato nel localStorage (JSON.stringify!).
+ * 6. Chiama visualizzaLista().
+ */
+// TODO: Scrivi qui il codice per aggiungere un film...
+
+
+
+// AVVIO
+inizializzaApp();
+
+
+
+
+/************************************************************************/
+/************************* ESERCIZI EXTRA *******************************/
+/************************************************************************/
+
+/**
+ * Esercizio Extra 1: Rimuovere Elementi
+ * 
+ * OBIETTIVO:
+ * Aggiungere un bottone "Elimina" accanto a ogni film che rimuova il film
+ * dall'array E aggiorni il localStorage.
+ * 
+ * Questo esercizio RICHIEDE di modificare la funzione 'visualizzaLista'.
+ * 
+ * Possibile Implementazione:
+ * 1. Usare un ciclo for con la variabile indice (let i = 0; i < ...; i++).
+ * 2. Dentro il ciclo crea un bottone con testo "Elimina" o "X" (mettere anche la classe corretta già presente in CSS).
+ * 3. Aggiungi un eventListener al bottone che:
+ *    - Usa l'indice 'i' per fare filmWatchlist.splice(i, 1) e rimuovere l'elemento.
+ *    - Salva l'array aggiornato nel localStorage.
+ * 4. Richiamare visualizzaLista().
+ * Nota: Ricorda che ogni volta che visualizzi la lista, stai ricreando TUTTI gli elementi HTML,
+ * quindi i vecchi listener vengono persi. Devi rimetterli ogni volta.
+ */
+
+
+/**
+ * Esercizio Extra 2: Stato "Visto/Non Visto"
+ * 
+ * OBIETTIVO:
+ * Aggiungi una checkbox accanto a ogni film. 
+ * Se l'utente la spunta, lo stato "visto" del film (true/false) deve essere salvato.
+ * 
+ * LOGICA:
+ * 1. Modifica l'oggetto iniziale del film aggiungendo la proprietà --> visto: false.
+ * 2. Nella render, per ogni elemento <li>, crea un <input type="checkbox">.
+ * 3. Imposta checkbox.checked = film.visto.
+ * 4. All'evento 'change' della checkbox:
+ *    - Aggiorna filmWatchlist[index].visto = checkbox.checked
+ *    - Salva tutto nel localStorage.
+ *    - (Opzionale) Aggiungi una classe CSS per barrare il testo se visto --> text-decoration: line-through.
+ *      Nota: devi aggiornare la classe del <p> dentro l'li in base a film.visto.
+ */
--- a/localStorage/watchlist/style.css
+++ b/localStorage/watchlist/style.css
@@ -0,0 +1,54 @@
+body {
+    font-family: sans-serif;
+    max-width: 600px;
+    margin: 2rem auto;
+    padding: 1rem;
+}
+
+.input-group {
+    background: #eee;
+    padding: 1rem;
+    border-radius: 8px;
+    display: flex;
+    gap: 10px;
+}
+
+input {
+    padding: 8px;
+    flex: 1;
+}
+
+input[type="checkbox"] {
+    transform: scale(1.5);
+}
+
+button {
+    padding: 8px 16px;
+    cursor: pointer;
+    background: #28a745;
+    color: white;
+    border: none;
+    border-radius: 4px;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+    margin-top: 2rem;
+}
+
+li {
+    background: white;
+    border: 1px solid #ddd;
+    padding: 10px;
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.delete-btn {
+    background: #dc3545;
+    margin-left: 10px;
+    font-size: 0.8rem;
+}