// ╔══════════════════════════════════════════════════════════════════════════════╗
// ║              🍕  IL MENU DELLA PIZZERIA — ESERCIZIO GUIDATO               ║
// ║                                                                            ║
// ║  Questo esercizio ti guida passo passo attraverso TUTTO JavaScript.        ║
// ║  Ogni capitolo ha:                                                         ║
// ║                                                                            ║
// ║  📖 SPIEGAZIONE — leggi e capisci il concetto                             ║
// ║  💡 ESEMPIO     — codice funzionante da osservare                         ║
// ║  ✏️  TODO        — il codice che devi scrivere TU                          ║
// ║  ✅ VERIFICA    — come controllare che hai fatto giusto                    ║
// ║                                                                            ║
// ║  REGOLE:                                                                   ║
// ║  1. Lavora dall'alto verso il basso, NON saltare step                     ║
// ║  2. Apri la Console del browser (F12) per vedere i console.log            ║
// ║  3. Salva il file e ricarica la pagina dopo ogni modifica                 ║
// ║  4. Se ti blocchi, RILEGGI la spiegazione e l'esempio                     ║
// ╚══════════════════════════════════════════════════════════════════════════════╝


// ============================================================================
// CAPITOLO 1 — VARIABILI E TIPI
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 SPIEGAZIONE                                                          │
// │                                                                          │
// │ In JavaScript, le VARIABILI sono come "scatole" dove metti dei valori.  │
// │                                                                          │
// │ - let   → crea una variabile che puoi CAMBIARE dopo                     │
// │ - const → crea una variabile che NON puoi cambiare (costante)           │
// │                                                                          │
// │ I TIPI principali sono:                                                  │
// │ - string  → testo tra virgolette: "ciao", 'mondo'                       │
// │ - number  → numeri: 42, 3.14                                            │
// │ - boolean → vero/falso: true, false                                     │
// │                                                                          │
// │ console.log() → stampa un valore nella console del browser              │
// │ typeof        → ti dice il tipo di una variabile                        │
// └──────────────────────────────────────────────────────────────────────────┘

// 💡 ESEMPIO (leggi e capisci, NON modificare):
const esempioNomePizza = "Margherita";
let esempioPrezzo = 7.50;
const esempioDisponibile = true;

console.log("--- CAPITOLO 1 - Esempio ---");
console.log("Pizza:", esempioNomePizza);           // → "Margherita"
console.log("Prezzo:", esempioPrezzo);             // → 7.5
console.log("Disponibile:", esempioDisponibile);   // → true
console.log("Tipo di esempioNomePizza:", typeof esempioNomePizza);   // → "string"
console.log("Tipo di esempioPrezzo:", typeof esempioPrezzo);         // → "number"

// ─────────────────────────────────────────────────────────
// ✏️ STEP 1.1 — Crea le variabili base della tua pizzeria
// ─────────────────────────────────────────────────────────
// Crea queste variabili e stampale in console:
//
// 1. Una COSTANTE chiamata "nomePizzeria" con il valore "La Pizza del Codice"
// 2. Una COSTANTE chiamata "maxPizze" con il valore 15
// 3. Una variabile (let) chiamata "pizzeInMenu" con il valore 0
// 4. Una variabile (let) chiamata "pizzeriaAperta" con il valore true
//
// Poi stampa tutte e 4 con console.log()

// 👇 SCRIVI QUI IL TUO CODICE (Step 1.1)



// ✅ VERIFICA: Apri la console (F12). Dovresti vedere:
// "La Pizza del Codice"
// 15
// 0
// true

// ─────────────────────────────────────────────────────────
// ✏️ STEP 1.2 — Usa typeof per controllare i tipi
// ─────────────────────────────────────────────────────────
// Stampa il typeof di ognuna delle 4 variabili che hai creato.
// Usa questo formato: console.log("Tipo di nomePizzeria:", typeof nomePizzeria);

// 👇 SCRIVI QUI IL TUO CODICE (Step 1.2)



// ✅ VERIFICA: Dovresti vedere in console:
// "Tipo di nomePizzeria: string"
// "Tipo di maxPizze: number"
// "Tipo di pizzeInMenu: number"
// "Tipo di pizzeriaAperta: boolean"


// ============================================================================
// CAPITOLO 2 — OPERATORI
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 SPIEGAZIONE                                                          │
// │                                                                          │
// │ OPERATORI ARITMETICI — fanno calcoli con i numeri:                       │
// │   +  (somma)    -  (sottrazione)    *  (moltiplicazione)                │
// │   /  (divisione)    %  (resto/modulo)                                   │
// │                                                                          │
// │ OPERATORI DI CONFRONTO — confrontano due valori, restituiscono boolean: │
// │   === (uguale stretto)  !== (diverso stretto)                           │
// │   >  (maggiore)   <  (minore)   >=  <=                                  │
// │   ⚠️ NON usare == (uguale debole), usa SEMPRE ===                       │
// │                                                                          │
// │ OPERATORI LOGICI — combinano condizioni booleane:                       │
// │   && (AND: entrambe vere)   || (OR: almeno una vera)   ! (NOT: inverte)│
// └──────────────────────────────────────────────────────────────────────────┘

// 💡 ESEMPIO:
console.log("\n--- CAPITOLO 2 - Esempio ---");
const costoIngredienti = 3.20;
const costoManodopera = 1.80;
const costoTotale = costoIngredienti + costoManodopera;   // → 5.00
console.log("Costo totale:", costoTotale);

const pizzeOrdinate = 45;
const pizzeDisponibili = 60;
const percentualeVenduta = (pizzeOrdinate / pizzeDisponibili) * 100; // → 75
console.log("Vendute: " + percentualeVenduta + "%");

const èCostosa = costoTotale > 4;        // → true
const èEconomica = costoTotale < 3;      // → false
const haIngredienti = costoIngredienti > 0; // → true
const possoPreparare = haIngredienti && pizzeriaAperta; // → true (entrambe vere)
console.log("Posso preparare:", possoPreparare);

// ─────────────────────────────────────────────────────────
// ✏️ STEP 2.1 — Calcoli sulla pizzeria
// ─────────────────────────────────────────────────────────
// 1. Crea una costante "prezzoBase" con valore 8.50
// 2. Crea una costante "ricarico" con valore 1.3 (ricarico del 30%)
// 3. Crea una costante "prezzoFinale" = prezzoBase * ricarico
// 4. Crea una costante "postiDisponibili" = maxPizze - pizzeInMenu
//    (usa le variabili create al Capitolo 1!)
// 5. Stampa prezzoFinale e postiDisponibili

// 👇 SCRIVI QUI IL TUO CODICE (Step 2.1)



// ✅ VERIFICA: In console dovresti vedere:
// prezzoFinale → 11.05
// postiDisponibili → 15 (perché pizzeInMenu era 0)

// ─────────────────────────────────────────────────────────
// ✏️ STEP 2.2 — Confronti e logica
// ─────────────────────────────────────────────────────────
// 1. Crea una costante "èConveniente" che vale true se prezzoFinale < 15
// 2. Crea una costante "haPostiMenu" che vale true se postiDisponibili > 0
// 3. Crea una costante "puòAggiungere" che è true se sia èConveniente che haPostiMenu sono true (usa &&)
// 4. Crea una costante "menuPieno" che è il CONTRARIO di haPostiMenu (usa !)
// 5. Stampa tutti e 4 i valori

// 👇 SCRIVI QUI IL TUO CODICE (Step 2.2)



// ✅ VERIFICA:
// èConveniente → true (11.05 < 15)
// haPostiMenu → true (15 > 0)
// puòAggiungere → true
// menuPieno → false


// ============================================================================
// CAPITOLO 3 — STRUTTURE CONDIZIONALI
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 SPIEGAZIONE                                                          │
// │                                                                          │
// │ Le condizionali permettono al codice di "decidere" cosa fare.           │
// │                                                                          │
// │ if (condizione) {          │  if (condizione) {                          │
// │   // se vera               │    // se vera                               │
// │ }                          │  } else {                                   │
// │                            │    // se falsa                               │
// │                            │  }                                          │
// │                                                                          │
// │ if (cond1) {              Per più di 2 casi:                             │
// │   // ...                                                                 │
// │ } else if (cond2) {       switch (valore) {                             │
// │   // ...                    case "A": ... break;                         │
// │ } else {                    case "B": ... break;                         │
// │   // ...                    default: ...                                 │
// │ }                         }                                              │
// └──────────────────────────────────────────────────────────────────────────┘

// 💡 ESEMPIO:
console.log("\n--- CAPITOLO 3 - Esempio ---");
const prezzoPizzaEsempio = 12;

if (prezzoPizzaEsempio >= 18) {
    console.log("Fascia: PREMIUM");
} else if (prezzoPizzaEsempio >= 13) {
    console.log("Fascia: GOURMET");
} else if (prezzoPizzaEsempio >= 8) {
    console.log("Fascia: MEDIA");           // ← questo viene stampato (12 >= 8)
} else {
    console.log("Fascia: ECONOMICA");
}

// ─────────────────────────────────────────────────────────
// ✏️ STEP 3.1 — Controlla se una pizza può essere aggiunta al menu
// ─────────────────────────────────────────────────────────
// Crea una variabile "prezzoCandidata" con valore 9.50
// Crea una variabile "categoriaCandidata" con valore "Speciale"
//
// Scrivi un if/else che:
// - Se prezzoCandidata > 0 E (&&) categoriaCandidata NON è vuota (!== "")
//   → stampa "✅ Pizza accettata nel menu!"
// - Altrimenti
//   → stampa "❌ Pizza rifiutata: dati incompleti"

// 👇 SCRIVI QUI IL TUO CODICE (Step 3.1)



// ✅ VERIFICA: Dovresti vedere "✅ Pizza accettata nel menu!" (9.50 > 0 e "Speciale" !== "")

// ─────────────────────────────────────────────────────────
// ✏️ STEP 3.2 — Assegna una fascia di prezzo con else if
// ─────────────────────────────────────────────────────────
// Crea una variabile "prezzo" con valore 14
// Crea una variabile "fascia" (let, iniziala a "")
//
// Scrivi una catena if / else if / else:
// - prezzo >= 18 → fascia = "Premium"
// - prezzo >= 13 → fascia = "Gourmet"
// - prezzo >= 8  → fascia = "Media"
// - prezzo >= 5  → fascia = "Economica"
// - altrimenti   → fascia = "Budget"
//
// Dopo tutti gli if, stampa: console.log("Fascia di prezzo:", fascia)

// 👇 SCRIVI QUI IL TUO CODICE (Step 3.2)



// ✅ VERIFICA: Dovresti vedere "Fascia di prezzo: Gourmet" (14 >= 13)

// ─────────────────────────────────────────────────────────
// ✏️ STEP 3.3 — Usa switch per la categoria
// ─────────────────────────────────────────────────────────
// Crea una variabile "categoria" con valore "Gourmet"
//
// Scrivi uno switch(categoria) con questi case:
// - "Classica"   → stampa "🍕 Le pizze della tradizione"
// - "Speciale"   → stampa "⭐ Creazioni dello chef"
// - "Gourmet"    → stampa "🏆 Ingredienti ricercati e di alta qualità"
// - "Stagionale" → stampa "🌿 Ingredienti freschi di stagione"
// - default      → stampa "❓ Categoria sconosciuta"
//
// RICORDA: metti break; dopo ogni case!

// 👇 SCRIVI QUI IL TUO CODICE (Step 3.3)



// ✅ VERIFICA: Dovresti vedere "🏆 Ingredienti ricercati e di alta qualità"


// ============================================================================
// CAPITOLO 4 — CICLI (ITERAZIONI)
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 SPIEGAZIONE                                                          │
// │                                                                          │
// │ I CICLI ripetono un blocco di codice più volte.                         │
// │                                                                          │
// │ WHILE — ripete FINCHÉ la condizione è vera:                             │
// │   let i = 0;                                                             │
// │   while (i < 5) {                                                        │
// │       console.log(i);  // 0, 1, 2, 3, 4                                │
// │       i++;              // ⚠️ FONDAMENTALE! Senza, ciclo infinito!     │
// │   }                                                                      │
// │                                                                          │
// │ FOR — più compatto, ha tutto in una riga:                               │
// │   for (let i = 0; i < 5; i++) {                                         │
// │       console.log(i);  // 0, 1, 2, 3, 4                                │
// │   }                                                                      │
// │   // (inizio; condizione; incremento)                                   │
// │                                                                          │
// │ break    → esce dal ciclo immediatamente                                │
// │ continue → salta all'iterazione successiva                              │
// └──────────────────────────────────────────────────────────────────────────┘

// 💡 ESEMPIO:
console.log("\n--- CAPITOLO 4 - Esempio ---");
// Prepariamo 5 ordini con un ciclo
for (let i = 1; i <= 5; i++) {
    console.log("Ordine #" + i + " preparato");
}
// → Ordine #1 preparato, Ordine #2 preparato, ... Ordine #5 preparato

// Esempio con accumulatore:
let sommaPrezzi = 0;
const prezziEsempio = [7.50, 9.00, 12.00, 8.50, 10.00];
for (let i = 0; i < prezziEsempio.length; i++) {
    sommaPrezzi = sommaPrezzi + prezziEsempio[i];
}
console.log("Somma prezzi:", sommaPrezzi); // → 47

// ─────────────────────────────────────────────────────────
// ✏️ STEP 4.1 — Prepara i tavoli con while
// ─────────────────────────────────────────────────────────
// Usa un ciclo WHILE per stampare in console:
//   "Tavolo 1 pronto"
//   "Tavolo 2 pronto"
//   "Tavolo 3 pronto"
//   "Tavolo 4 pronto"
//
// Suggerimento:
// 1. Crea una variabile contatore: let tavolo = 1;
// 2. Scrivi while (tavolo <= 4) { ... }
// 3. Dentro il while, stampa "Tavolo " + tavolo + " pronto"
// 4. ⚠️ NON dimenticare di incrementare: tavolo++;

// 👇 SCRIVI QUI IL TUO CODICE (Step 4.1)



// ✅ VERIFICA: 4 righe in console "Tavolo 1 pronto" ... "Tavolo 4 pronto"

// ─────────────────────────────────────────────────────────
// ✏️ STEP 4.2 — Conta le pizze costose con for
// ─────────────────────────────────────────────────────────
// Dato l'array di prezzi qui sotto, usa un ciclo FOR per contare
// quante pizze costano >= 10 euro
//
// 1. Crea una variabile "pizzeCostose" iniziata a 0
// 2. Usa un ciclo for che scorre tutto l'array
// 3. Dentro il ciclo, usa un if: se prezziMenu[i] >= 10, incrementa pizzeCostose
// 4. DOPO il ciclo, stampa il risultato

const prezziMenu = [5, 12, 8, 18, 6, 15, 9, 22];

// 👇 SCRIVI QUI IL TUO CODICE (Step 4.2)



// ✅ VERIFICA: pizzeCostose → 4 (le pizze da 12, 18, 15, 22)


// ============================================================================
// CAPITOLO 5 — FUNZIONI
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 SPIEGAZIONE                                                          │
// │                                                                          │
// │ Una FUNZIONE è un blocco di codice riutilizzabile con un nome.          │
// │                                                                          │
// │ DICHIARARE una funzione (crearla):                                      │
// │   function saluta(nome) {         ← "nome" è un PARAMETRO              │
// │       console.log("Ciao " + nome);                                      │
// │   }                                                                      │
// │                                                                          │
// │ CHIAMARE una funzione (usarla):                                         │
// │   saluta("Mario");  → stampa "Ciao Mario"                              │
// │   saluta("Luigi");  → stampa "Ciao Luigi"                              │
// │                                                                          │
// │ RETURN — fa "uscire" un valore dalla funzione:                          │
// │   function somma(a, b) {                                                │
// │       return a + b;    ← restituisce il risultato                       │
// │   }                                                                      │
// │   const risultato = somma(3, 4);  // risultato = 7                      │
// │                                                                          │
// │ ⚠️ Se una funzione non ha return, restituisce "undefined"              │
// └──────────────────────────────────────────────────────────────────────────┘

// 💡 ESEMPIO:
console.log("\n--- CAPITOLO 5 - Esempio ---");

function calcolaPrezzo(costoBase) {
    const prezzoConRicarico = costoBase * 1.3 + 2;  // ricarico 30% + 2€ fissi
    return prezzoConRicarico;
}

const prezzoDiavola = calcolaPrezzo(6);    // → 9.8
console.log("Prezzo Diavola:", prezzoDiavola);

function presentaPizza(nome, costoBase) {
    const prezzoVendita = calcolaPrezzo(costoBase);   // una funzione può chiamarne un'altra!
    console.log(nome + " — Costo: €" + costoBase + " → Vendita: €" + prezzoVendita);
}

presentaPizza("Capricciosa", 7);  // → "Capricciosa — Costo: €7 → Vendita: €11.1"

// ─────────────────────────────────────────────────────────
// ✏️ STEP 5.1 — Crea una funzione per la fascia di prezzo
// ─────────────────────────────────────────────────────────
// Crea una funzione chiamata "calcolaFascia" che:
// - Riceve UN parametro: "prezzo"
// - Usa if/else if (come al Capitolo 3, Step 3.2) per determinare la fascia:
//     prezzo >= 18 → return "Premium"
//     prezzo >= 13 → return "Gourmet"
//     prezzo >= 8  → return "Media"
//     prezzo >= 5  → return "Economica"
//     altrimenti   → return "Budget"
//
// Poi testa la funzione con questi 3 casi:
//   console.log(calcolaFascia(20));   // → "Premium"
//   console.log(calcolaFascia(10));   // → "Media"
//   console.log(calcolaFascia(4));    // → "Budget"

// 👇 SCRIVI QUI IL TUO CODICE (Step 5.1)



// ✅ VERIFICA: console mostra "Premium", "Media", "Budget"

// ─────────────────────────────────────────────────────────
// ✏️ STEP 5.2 — Funzione con più parametri
// ─────────────────────────────────────────────────────────
// Crea una funzione "creaDescrizione" che:
// - Riceve 3 parametri: nome, ingredienti, prezzo
// - Calcola la fascia usando calcolaFascia(prezzo) (la funzione dello step prima!)
// - Restituisce (return) una STRINGA così:
//   "🍕 NOME — Ingredienti: INGREDIENTI | Prezzo: €PREZZO | Fascia: FASCIA"
//
// Poi testala:
//   console.log(creaDescrizione("Margherita", "Pomodoro, mozzarella", 8));

// 👇 SCRIVI QUI IL TUO CODICE (Step 5.2)



// ✅ VERIFICA: "🍕 Margherita — Ingredienti: Pomodoro, mozzarella | Prezzo: €8 | Fascia: Media"


// ============================================================================
// CAPITOLO 6 — ARRAY
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 SPIEGAZIONE                                                          │
// │                                                                          │
// │ Un ARRAY è una lista ordinata di valori. Ogni valore ha un INDICE       │
// │ (posizione) che parte da 0.                                              │
// │                                                                          │
// │  const colori = ["rosso", "verde", "blu"];                              │
// │                    [0]      [1]      [2]     ← indici                   │
// │                                                                          │
// │ METODI PRINCIPALI:                                                       │
// │  .push(valore)   → aggiunge alla FINE                                   │
// │  .pop()          → rimuove dall'ULTIMO                                   │
// │  .shift()        → rimuove dal PRIMO                                    │
// │  .splice(i, 1)   → rimuove 1 elemento alla posizione i                 │
// │  .length         → quanti elementi ci sono                              │
// │                                                                          │
// │ ITERARE (scorrere) un array:                                            │
// │  for (let i = 0; i < arr.length; i++) { ... arr[i] ... }               │
// │  for (const elemento of arr) { ... elemento ... }                       │
// │                                                                          │
// │ TRASFORMARE con .map():                                                  │
// │  const doppi = [1, 2, 3].map(function(n) { return n * 2; });           │
// │  // → [2, 4, 6] — crea un NUOVO array trasformato                      │
// └──────────────────────────────────────────────────────────────────────────┘

// 💡 ESEMPIO:
console.log("\n--- CAPITOLO 6 - Esempio ---");
const pizzeEsempio = ["Margherita", "Diavola", "Capricciosa"];
pizzeEsempio.push("Quattro Formaggi");  // → ["Margherita", "Diavola", "Capricciosa", "Quattro Formaggi"]
console.log("Prima pizza:", pizzeEsempio[0]);     // → "Margherita"
console.log("Totale:", pizzeEsempio.length);      // → 4

for (const pizza of pizzeEsempio) {
    console.log("• " + pizza);
}

// ─────────────────────────────────────────────────────────
// ✏️ STEP 6.1 — Crea e gestisci l'array del menu
// ─────────────────────────────────────────────────────────
// 1. Crea un array "nomiPizze" con 3 nomi di pizze a scelta
// 2. Aggiungi una quarta pizza con .push()
// 3. Stampa quante pizze ci sono con .length
// 4. Stampa la SECONDA pizza (ricorda: indice 1!)
// 5. Rimuovi l'ultima pizza con .pop()
// 6. Stampa l'array completo

// 👇 SCRIVI QUI IL TUO CODICE (Step 6.1)



// ✅ VERIFICA: L'array finale ha 3 elementi (dopo il pop)

// ─────────────────────────────────────────────────────────
// ✏️ STEP 6.2 — Scorri e trasforma l'array
// ─────────────────────────────────────────────────────────
// 1. Usa un ciclo for...of per stampare ogni pizza di nomiPizze così:
//    "🍕 NomePizza è nel menu!"
//
// 2. Crea un nuovo array "nomiMaiuscoli" usando .map() che contiene tutti
//    i nomi in MAIUSCOLO. Suggerimento: "testo".toUpperCase()
//    const nomiMaiuscoli = nomiPizze.map(function(nome) {
//        return nome.toUpperCase();
//    });
//
// 3. Stampa nomiMaiuscoli

// 👇 SCRIVI QUI IL TUO CODICE (Step 6.2)



// ✅ VERIFICA: Vedi le 3 pizze con "🍕" e poi l'array in maiuscolo


// ============================================================================
// CAPITOLO 7 — OGGETTI
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 SPIEGAZIONE                                                          │
// │                                                                          │
// │ Un OGGETTO raggruppa più informazioni correlate in un'unica variabile.  │
// │ È come una "scheda" con proprietà: chiave → valore.                     │
// │                                                                          │
// │  const persona = {                                                       │
// │      nome: "Mario",          // proprietà "nome" con valore "Mario"     │
// │      età: 25,                                                            │
// │      attivo: true                                                        │
// │  };                                                                      │
// │                                                                          │
// │ ACCESSO:                                                                 │
// │  persona.nome          → "Mario"    (dot notation)                      │
// │  persona["nome"]       → "Mario"    (bracket notation)                  │
// │                                                                          │
// │ MODIFICA:                                                                │
// │  persona.età = 26;     → cambia il valore                               │
// │  persona.email = "..."; → AGGIUNGE una nuova proprietà                  │
// │  delete persona.email;  → RIMUOVE una proprietà                         │
// │                                                                          │
// │ DESTRUTTURAZIONE — estrae proprietà in variabili:                       │
// │  const { nome, età } = persona;                                         │
// │  console.log(nome); // → "Mario"                                        │
// └──────────────────────────────────────────────────────────────────────────┘

// 💡 ESEMPIO:
console.log("\n--- CAPITOLO 7 - Esempio ---");
const pizzaSample = {
    nome: "Napoletana",
    ingredienti: "Pomodoro, mozzarella, acciughe, capperi",
    prezzo: 9.50,
    disponibile: true,
    dettagli: {            // oggetto ANNIDATO (dentro un altro oggetto)
        calorie: 850,
        tempoPreparazione: 12
    }
};

console.log(pizzaSample.nome);                     // → "Napoletana"
console.log(pizzaSample.dettagli.calorie);         // → 850

const { nome: nomeEstratto, prezzo: prezzoEstratto } = pizzaSample;
console.log(nomeEstratto, prezzoEstratto);         // → "Napoletana" 9.5

// ─────────────────────────────────────────────────────────
// ✏️ STEP 7.1 — Crea un oggetto pizza
// ─────────────────────────────────────────────────────────
// Crea un oggetto "miaPizza" con queste proprietà:
// - nome: un nome di pizza a scelta (string)
// - ingredienti: gli ingredienti (string)
// - prezzo: un numero (es. 10.50)
// - disponibile: true
//
// Poi:
// 1. Stampa il nome con dot notation
// 2. Cambia il prezzo a 12.00
// 3. Aggiungi una nuova proprietà "fascia" usando la funzione calcolaFascia(miaPizza.prezzo)
// 4. Stampa l'oggetto completo: console.log(miaPizza)

// 👇 SCRIVI QUI IL TUO CODICE (Step 7.1)



// ✅ VERIFICA: L'oggetto ha 5 proprietà (nome, ingredienti, prezzo, disponibile, fascia)

// ─────────────────────────────────────────────────────────
// ✏️ STEP 7.2 — Array di oggetti + destrutturazione
// ─────────────────────────────────────────────────────────
// 1. Crea un array "menu" con 3 oggetti pizza (ognuno ha: nome, ingredienti, prezzo)
//    Esempio:
//    const menu = [
//        { nome: "Margherita", ingredienti: "Pomodoro, mozzarella", prezzo: 7 },
//        { nome: "Diavola", ingredienti: "Pomodoro, mozzarella, salame piccante", prezzo: 9 },
//        { nome: "Tartufo", ingredienti: "Crema di tartufo, mozzarella, funghi", prezzo: 16 }
//    ];
//
// 2. Usa un ciclo for...of per stampare ogni pizza.
//    Dentro il ciclo, usa la DESTRUTTURAZIONE per estrarre nome e prezzo:
//
//    for (const pizza of menu) {
//        const { nome, prezzo } = pizza;
//        console.log(nome + " — €" + prezzo);
//    }

// 👇 SCRIVI QUI IL TUO CODICE (Step 7.2)



// ✅ VERIFICA: Vedi 3 righe tipo "Margherita — €7"


// ============================================================================
// CAPITOLO 8 — DOM: SELEZIONE E MODIFICA
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 SPIEGAZIONE                                                          │
// │                                                                          │
// │ Il DOM (Document Object Model) è il modo in cui JavaScript "vede" la    │
// │ pagina HTML. Puoi selezionare elementi e modificarli.                    │
// │                                                                          │
// │ SELEZIONARE UN ELEMENTO:                                                 │
// │  document.querySelector("#id")     → seleziona per ID                   │
// │  document.querySelector(".classe") → seleziona per classe               │
// │  document.querySelector("tag")     → seleziona per tag                  │
// │                                                                          │
// │ MODIFICARE:                                                              │
// │  elemento.textContent = "testo";   → cambia il testo                    │
// │  elemento.innerHTML = "<b>bold</b>"; → cambia l'HTML interno           │
// │                                                                          │
// │ LEGGERE UN INPUT:                                                        │
// │  const valore = document.querySelector("#mio-input").value;             │
// │                                                                          │
// │ STILI:                                                                   │
// │  elemento.style.color = "red";                                          │
// │  elemento.style.backgroundColor = "#333";                               │
// │                                                                          │
// │ CLASSI CSS:                                                              │
// │  elemento.classList.add("classe")                                        │
// │  elemento.classList.remove("classe")                                     │
// │  elemento.classList.toggle("classe")  → aggiunge/rimuove                │
// └──────────────────────────────────────────────────────────────────────────┘

// 💡 ESEMPIO:
console.log("\n--- CAPITOLO 8 - Esempio ---");
// Seleziona il titolo del menu e stampa il testo
const titoloEl = document.querySelector("#titolo-menu");
console.log("Titolo attuale:", titoloEl.textContent); // → "Il Nostro Menu"

// ─────────────────────────────────────────────────────────
// ✏️ STEP 8.1 — Modifica il titolo e le statistiche
// ─────────────────────────────────────────────────────────
// 1. Seleziona l'elemento con id "titolo-menu" e cambia il suo textContent
//    in "🍕 " + nomePizzeria (la variabile del Capitolo 1!)
//
// 2. Seleziona l'elemento con id "stat-totale" e metti come textContent
//    il numero di pizze nel tuo "menu" (array del Capitolo 7, Step 7.2)
//    Suggerimento: menu.length
//
// 3. Seleziona l'elemento con id "stat-totale" e cambia il suo colore
//    in "#d35400" usando: elemento.style.color = "#d35400";

// 👇 SCRIVI QUI IL TUO CODICE (Step 8.1)



// ✅ VERIFICA: Il titolo nella pagina è cambiato e il numero di pizze è visibile

// ─────────────────────────────────────────────────────────
// ✏️ STEP 8.2 — Leggi i valori dagli input
// ─────────────────────────────────────────────────────────
// 1. Seleziona l'input con id "input-nome" e salva il suo .value in una variabile
//    (sarà vuoto, va bene così per ora)
//
// 2. Seleziona l'input con id "input-prezzo" e salva il suo .value
//    ⚠️ ATTENZIONE: .value restituisce SEMPRE una stringa!
//    Per convertirlo in numero usa: Number(elemento.value)  oppure  parseFloat(elemento.value)
//
// 3. Stampa in console i valori letti
//
// 4. Seleziona il div con id "messaggio", cambia il suo textContent in "Benvenuto nella Pizzeria!"
//    e rendilo visibile cambiando lo stile: elemento.style.display = "block"
//    Aggiungi anche la classe "msg-successo": elemento.classList.add("msg-successo")

// 👇 SCRIVI QUI IL TUO CODICE (Step 8.2)



// ✅ VERIFICA: Un messaggio verde "Benvenuto nella Pizzeria!" appare nella pagina


// ============================================================================
// CAPITOLO 9 — DOM: CREAZIONE ELEMENTI E EVENTI
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 SPIEGAZIONE                                                          │
// │                                                                          │
// │ CREARE ELEMENTI dal nulla:                                               │
// │   const li = document.createElement("li");  → crea un <li>             │
// │   li.textContent = "Testo";                  → metti il testo           │
// │   lista.appendChild(li);                     → inseriscilo nella pagina │
// │                                                                          │
// │ EVENTI — far succedere cose quando l'utente interagisce:                │
// │                                                                          │
// │   bottone.addEventListener("click", function() {                        │
// │       // codice eseguito quando si clicca il bottone                    │
// │   });                                                                    │
// │                                                                          │
// │   input.addEventListener("input", function(e) {                         │
// │       // e.target.value → il testo che l'utente sta scrivendo           │
// │       console.log(e.target.value);                                      │
// │   });                                                                    │
// │                                                                          │
// │ Il PATTERN fondamentale per le app web è:                               │
// │   1. L'utente fa qualcosa (click, scrive, ecc.)                         │
// │   2. Il JS legge i dati                                                  │
// │   3. Il JS aggiorna l'array/variabile (i DATI)                          │
// │   4. Il JS aggiorna la pagina (il DOM) per riflettere i nuovi dati     │
// └──────────────────────────────────────────────────────────────────────────┘

// 💡 ESEMPIO:
console.log("\n--- CAPITOLO 9 - Esempio ---");

// Creiamo un elemento e lo mettiamo nella pagina
function creaElementoPizza(testo) {
    const li = document.createElement("li");

    const infoDiv = document.createElement("div");
    infoDiv.classList.add("info-pizza");

    const nomeSpan = document.createElement("span");
    nomeSpan.classList.add("nome-pizza");
    nomeSpan.textContent = testo;

    infoDiv.appendChild(nomeSpan);
    li.appendChild(infoDiv);

    return li;
}

// Mettiamolo nella lista
const listaPizze = document.querySelector("#lista-pizze");
// (Non aggiungiamo l'esempio per non sporcare la lista)

// ─────────────────────────────────────────────────────────
// ✏️ STEP 9.1 — Renderizza il menu nella pagina
// ─────────────────────────────────────────────────────────
// Prendi l'array "menu" (Capitolo 7) e mostra ogni pizza nella lista.
//
// 1. Seleziona l'elemento con id "lista-pizze" (la <ul>)
// 2. Per ogni pizza dell'array "menu", usa un ciclo for...of:
//    a. Crea un <li> con document.createElement("li")
//    b. Metti come innerHTML dell'<li>:
//       '<div class="info-pizza">' +
//       '  <span class="nome-pizza">' + pizza.nome + '</span>' +
//       '  <span class="dettagli-pizza"> | ' + pizza.ingredienti + ' | €' + pizza.prezzo + '</span>' +
//       '</div>'
//    c. Aggiungi il <li> alla lista con: lista.appendChild(li)

// 👇 SCRIVI QUI IL TUO CODICE (Step 9.1)



// ✅ VERIFICA: Le 3 pizze del menu appaiono nella pagina!

// ─────────────────────────────────────────────────────────
// ✏️ STEP 9.2 — Aggiungi una pizza con il bottone
// ─────────────────────────────────────────────────────────
// Ora rendiamo il bottone "Aggiungi Pizza" funzionante!
//
// 1. Seleziona il bottone con id "btn-aggiungi"
// 2. Aggiungi un addEventListener per l'evento "click"
// 3. Dentro la funzione del click:
//    a. Leggi il valore dall'input "input-nome"            (.value)
//    b. Leggi il valore dall'input "input-ingredienti"     (.value)
//    c. Leggi il valore dall'input "input-prezzo"          (Number(.value))
//    d. Leggi il valore dal select "select-categoria"      (.value)
//
//    e. Controlla che il nome NON sia vuoto:
//       if (nome === "") {
//           alert("Inserisci un nome!");
//           return;   ← esce dalla funzione
//       }
//
//    f. Crea un nuovo oggetto pizza: { nome: ..., ingredienti: ..., prezzo: ..., categoria: ... }
//    g. Aggiungilo all'array "menu" con .push()
//
//    h. Crea un <li> come nello Step 9.1 e aggiungilo alla lista
//
//    i. Svuota gli input dopo l'aggiunta:
//       document.querySelector("#input-nome").value = "";
//       document.querySelector("#input-ingredienti").value = "";
//       document.querySelector("#input-prezzo").value = "";
//
//    j. Aggiorna la statistica: seleziona "#stat-totale" e metti menu.length
//
// Suggerimento: tutto il codice dei punti a-j va DENTRO la function() del click

// 👇 SCRIVI QUI IL TUO CODICE (Step 9.2)



// ✅ VERIFICA: Compila il form, clicca "Aggiungi Pizza" → la pizza appare nella lista!

// ─────────────────────────────────────────────────────────
// ✏️ STEP 9.3 — Implementa la ricerca in tempo reale
// ─────────────────────────────────────────────────────────
// Quando l'utente SCRIVE nel campo di ricerca, filtra la lista.
//
// 1. Seleziona l'input con id "input-ricerca"
// 2. Aggiungi un addEventListener per l'evento "input" (NON "click"!)
//    L'evento "input" si attiva ad ogni lettera digitata.
//
// 3. Dentro la funzione, ricevi il parametro "e" (l'evento):
//    function(e) {
//        const testo = e.target.value.toLowerCase();  // testo digitato, in minuscolo
//
//        // Filtra l'array menu: tieni solo quelli il cui nome contiene "testo"
//        const risultati = menu.filter(function(pizza) {
//            return pizza.nome.toLowerCase().includes(testo);
//        });
//
//        // Svuota la lista e ri-renderizza solo i risultati
//        // (vedi appunti sotto)
//    }
//
// Per SVUOTARE la lista: lista.innerHTML = "";
// Poi usa un for...of su "risultati" per ricreare gli <li> (come Step 9.1)

// 👇 SCRIVI QUI IL TUO CODICE (Step 9.3)



// ✅ VERIFICA: Scrivi nel campo ricerca → la lista si filtra in tempo reale!


// ============================================================================
// CAPITOLO 10 — MANIPOLAZIONE DATI
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 SPIEGAZIONE                                                          │
// │                                                                          │
// │ METODI STRINGA — manipolano testo:                                      │
// │  "  Ciao  ".trim()       → "Ciao"           (rimuove spazi)            │
// │  "ciao".toUpperCase()    → "CIAO"                                       │
// │  "CIAO".toLowerCase()    → "ciao"                                       │
// │  "a-b-c".split("-")      → ["a", "b", "c"]  (divide in array)          │
// │  "ciao mondo".includes("mondo") → true                                  │
// │  "ciao".replace("c", "C") → "Ciao"                                     │
// │                                                                          │
// │ NUMERI E MATH:                                                           │
// │  parseFloat("3.14")      → 3.14  (stringa → numero decimale)           │
// │  parseInt("42")          → 42    (stringa → numero intero)              │
// │  (3.14159).toFixed(2)    → "3.14" (arrotonda a 2 decimali, → stringa!) │
// │  Math.round(3.7)         → 4     (arrotonda)                            │
// │  Math.floor(3.7)         → 3     (arrotonda per difetto)                │
// │  Math.ceil(3.2)          → 4     (arrotonda per eccesso)                │
// │  Math.random()           → 0.xxxx (numero casuale 0-1)                  │
// │  Math.floor(Math.random() * 10) → 0-9 (intero casuale 0-9)            │
// │                                                                          │
// │ TEMPLATE LITERALS (backtick) — modo moderno di creare stringhe:         │
// │  const msg = `Ciao ${nome}, hai ${età} anni`;                           │
// │  // Usi i backtick ` ` invece delle virgolette                          │
// │  // Dentro ${...} metti variabili o espressioni                         │
// └──────────────────────────────────────────────────────────────────────────┘

// 💡 ESEMPIO:
console.log("\n--- CAPITOLO 10 - Esempio ---");

const nomeGrezzo = "  margherita  ";
const nomePulito = nomeGrezzo.trim();     // → "margherita"
const nomeFormattato = nomePulito.charAt(0).toUpperCase() + nomePulito.slice(1);
console.log("Nome formattato:", nomeFormattato); // → "Margherita"

const prezzoRandom = (Math.random() * 15 + 5).toFixed(2); // prezzo casuale tra 5 e 20
console.log("Prezzo casuale: €" + prezzoRandom);

const descrizionePizza = `La pizza ${nomeFormattato} costa €${prezzoRandom}`;
console.log(descrizionePizza);

// ─────────────────────────────────────────────────────────
// ✏️ STEP 10.1 — Pulisci e formatta i nomi delle pizze
// ─────────────────────────────────────────────────────────
// 1. Crea una funzione "pulisciNome" che:
//    - Riceve un parametro "nome"
//    - Rimuove gli spazi (trim)
//    - Mette la prima lettera in maiuscolo e il resto in minuscolo
//      Suggerimento: nome.charAt(0).toUpperCase() + nome.slice(1).toLowerCase()
//    - Restituisce il risultato
//
// 2. Testa con:
//    console.log(pulisciNome("  mARGHERITA  "));   // → "Margherita"
//    console.log(pulisciNome("diavola"));           // → "Diavola"

// 👇 SCRIVI QUI IL TUO CODICE (Step 10.1)



// ✅ VERIFICA: "Margherita" e "Diavola"

// ─────────────────────────────────────────────────────────
// ✏️ STEP 10.2 — Statistiche con Math e template literals
// ─────────────────────────────────────────────────────────
// 1. Crea una funzione "calcolaStatistiche" che riceve l'array "menu"
//    e restituisce un OGGETTO con:
//    - totale: menu.length
//    - sommaPrezzi: la somma di tutti i prezzi (usa un ciclo for)
//    - media: sommaPrezzi / totale, arrotondata a 2 decimali con toFixed(2)
//    - piuCara: il nome della pizza con il prezzo più alto
//
//    Suggerimento per trovare la più cara:
//    let maxPrezzo = 0;
//    let nomePiuCara = "";
//    for (const pizza of menu) {
//        if (pizza.prezzo > maxPrezzo) {
//            maxPrezzo = pizza.prezzo;
//            nomePiuCara = pizza.nome;
//        }
//    }
//
// 2. Chiama la funzione e salva il risultato:
//    const stats = calcolaStatistiche(menu);
//
// 3. Usa template literals per stampare:
//    console.log(`📊 Menu: ${stats.totale} pizze | Media: €${stats.media} | Più cara: ${stats.piuCara}`);
//
// 4. Aggiorna il DOM:
//    Seleziona "#stat-media" e metti "€" + stats.media come textContent
//    Seleziona "#stat-piu-cara" e metti stats.piuCara come textContent

// 👇 SCRIVI QUI IL TUO CODICE (Step 10.2)



// ✅ VERIFICA: Le statistiche nella pagina si aggiornano!


// ============================================================================
// CAPITOLO 11 — LOCALSTORAGE
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 SPIEGAZIONE                                                          │
// │                                                                          │
// │ localStorage permette di SALVARE dati nel browser. I dati restano       │
// │ anche se chiudi e riapri la pagina!                                      │
// │                                                                          │
// │ ⚠️ PROBLEMA: localStorage salva SOLO stringhe.                          │
// │ Per salvare oggetti/array, devi convertirli:                             │
// │                                                                          │
// │ SALVARE:                                                                 │
// │   const dati = [{ nome: "Margherita", prezzo: 7 }];                     │
// │   const stringa = JSON.stringify(dati);       // oggetto → stringa JSON│
// │   localStorage.setItem("chiave", stringa);    // salva nel browser     │
// │                                                                          │
// │ CARICARE:                                                                │
// │   const stringa = localStorage.getItem("chiave");  // leggi la stringa │
// │   const dati = JSON.parse(stringa);                 // stringa → oggetto│
// │                                                                          │
// │ PATTERN "CARICA O INIZIALIZZA":                                         │
// │   const salvati = localStorage.getItem("chiave");                       │
// │   if (salvati !== null) {                                                │
// │       menu = JSON.parse(salvati);  // carica i dati salvati             │
// │   }                                                                      │
// │   // se salvati è null, "menu" resta con il valore iniziale             │
// └──────────────────────────────────────────────────────────────────────────┘

// 💡 ESEMPIO:
console.log("\n--- CAPITOLO 11 - Esempio ---");

// Salvare un singolo valore
localStorage.setItem("ultimoAccesso", "25/02/2026");
const ultimoAccesso = localStorage.getItem("ultimoAccesso");
console.log("Ultimo accesso:", ultimoAccesso); // → "25/02/2026"

// ─────────────────────────────────────────────────────────
// ✏️ STEP 11.1 — Salva il menu nel browser
// ─────────────────────────────────────────────────────────
// Aggiungiamo la funzionalità al bottone "💾 Salva"
//
// 1. Seleziona il bottone con id "btn-salva"
// 2. Aggiungi un addEventListener "click"
// 3. Dentro la funzione:
//    a. Converti l'array "menu" in stringa: JSON.stringify(menu)
//    b. Salva con: localStorage.setItem("menu-pizzeria", stringa)
//    c. Mostra un messaggio: seleziona "#messaggio",
//       cambia textContent in "💾 Menu salvato!",
//       rimuovi la classe "msg-errore" e aggiungi "msg-successo",
//       rendi visibile con style.display = "block"
//    d. Stampa in console: "Salvate " + menu.length + " pizze"

// 👇 SCRIVI QUI IL TUO CODICE (Step 11.1)



// ✅ VERIFICA: Clicca "Salva" → appare il messaggio verde + log in console

// ─────────────────────────────────────────────────────────
// ✏️ STEP 11.2 — Carica il menu dal browser
// ─────────────────────────────────────────────────────────
// Aggiungiamo la funzionalità al bottone "📂 Carica"
//
// 1. Seleziona il bottone con id "btn-carica"
// 2. Aggiungi un addEventListener "click"
// 3. Dentro la funzione:
//    a. Leggi i dati: const salvati = localStorage.getItem("menu-pizzeria")
//    b. Controlla se esistono:
//       if (salvati !== null) {
//           // Sovrascrivi l'array menu con i dati salvati
//           // ⚠️ Non puoi usare "menu = ..." se è const!
//           // Soluzione: svuota l'array e aggiungi i nuovi elementi:
//           menu.length = 0;  // svuota l'array
//           const datiCaricati = JSON.parse(salvati);
//           for (const pizza of datiCaricati) {
//               menu.push(pizza);
//           }
//
//           // Ri-renderizza la lista (svuota la <ul> e ricrea gli <li>)
//           const lista = document.querySelector("#lista-pizze");
//           lista.innerHTML = "";
//           for (const pizza of menu) {
//               const li = document.createElement("li");
//               li.innerHTML = '<div class="info-pizza">' +
//                   '<span class="nome-pizza">' + pizza.nome + '</span>' +
//                   '<span class="dettagli-pizza"> | ' + pizza.ingredienti + ' | €' + pizza.prezzo + '</span>' +
//                   '</div>';
//               lista.appendChild(li);
//           }
//
//           // Aggiorna le statistiche
//           document.querySelector("#stat-totale").textContent = menu.length;
//
//           // Messaggio di successo
//           // ... (come prima)
//       } else {
//           // Nessun dato trovato
//           alert("Nessun salvataggio trovato!");
//       }

// 👇 SCRIVI QUI IL TUO CODICE (Step 11.2)



// ✅ VERIFICA: Clicca "Salva", ricarica la pagina, clicca "Carica" → le pizze riappaiono!


// ============================================================================
// CAPITOLO 12 — BONUS: BOTTONE RESET E RIMOZIONE PIZZE
// ============================================================================

// ┌──────────────────────────────────────────────────────────────────────────┐
// │ 📖 Ora hai TUTTI gli strumenti. Questi ultimi step sono meno guidati   │
// │    per verificare che riesci a fare le cose da solo!                     │
// └──────────────────────────────────────────────────────────────────────────┘

// ─────────────────────────────────────────────────────────
// ✏️ STEP 12.1 — Bottone Reset
// ─────────────────────────────────────────────────────────
// Fai funzionare il bottone "Reset Menu" (#btn-reset):
// - Svuota l'array menu (menu.length = 0)
// - Svuota la lista nel DOM (innerHTML = "")
// - Azzera tutte le statistiche
// - Rimuovi i dati da localStorage: localStorage.removeItem("menu-pizzeria")
// - Mostra un messaggio di conferma

// 👇 SCRIVI QUI IL TUO CODICE (Step 12.1)



// ─────────────────────────────────────────────────────────
// ✏️ STEP 12.2 — Bottone rimuovi su ogni pizza
// ─────────────────────────────────────────────────────────
// Quando crei un <li> per una pizza (Step 9.1 e 9.2), aggiungi anche un
// bottone "Rimuovi" con classe "btn-danger".
//
// Suggerimento: modifica il codice dove crei gli <li> e aggiungi:
//   const btnRimuovi = document.createElement("button");
//   btnRimuovi.textContent = "❌";
//   btnRimuovi.classList.add("btn-danger");
//   btnRimuovi.addEventListener("click", function() {
//       // 1. Trova l'indice della pizza nell'array
//       const indice = menu.indexOf(pizza);
//       // 2. Rimuovila con splice
//       menu.splice(indice, 1);
//       // 3. Rimuovi l'<li> dal DOM
//       li.remove();
//       // 4. Aggiorna le statistiche
//       document.querySelector("#stat-totale").textContent = menu.length;
//   });
//   li.appendChild(btnRimuovi);

// 👇 SCRIVI QUI IL TUO CODICE (Step 12.2)



// ✅ VERIFICA: Se sei arrivato qui e tutto funziona, hai completato l'esercizio guidato!
// 🎯 Ora passa all'Esercizio 2 per verificare di saper fare tutto SENZA guida!