311 lines
12 KiB
JavaScript
311 lines
12 KiB
JavaScript
// ╔══════════════════════════════════════════════════════════════════════════════╗
|
|
// ║ 📇 LA RUBRICA CONTATTI — ESERCIZIO SEMI-GUIDATO ║
|
|
// ║ ║
|
|
// ║ In questo esercizio devi implementare tutto DA SOLO. ║
|
|
// ║ Per ogni capitolo trovi: ║
|
|
// ║ ║
|
|
// ║ 📋 REQUISITO — cosa devi fare ║
|
|
// ║ 💡 HINT — un piccolo aiuto se ti blocchi ║
|
|
// ║ ║
|
|
// ║ Se non riesci, torna all'Esercizio 1 e ripassa il capitolo corrispondente.║
|
|
// ╚══════════════════════════════════════════════════════════════════════════════╝
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 1 — VARIABILI E TIPI
|
|
// ============================================================================
|
|
|
|
// 📋 REQUISITO: Crea le variabili fondamentali della rubrica:
|
|
// - nomeApp (const, string): "La Mia Rubrica"
|
|
// - versione (const, number): 1.0
|
|
// - maxContatti (const, number): 50
|
|
// - contattiRegistrati (let, number): 0
|
|
// - appAttiva (let, boolean): true
|
|
//
|
|
// Stampa tutte le variabili e i loro tipi con typeof.
|
|
//
|
|
// 💡 HINT: const per cose che non cambiano, let per cose che cambieranno.
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 2 — OPERATORI
|
|
// ============================================================================
|
|
|
|
// 📋 REQUISITO:
|
|
// 1. Crea "postiLiberi" = maxContatti - contattiRegistrati
|
|
// 2. Crea "percentualeUso" = (contattiRegistrati / maxContatti) * 100
|
|
// 3. Crea "haPosti" = postiLiberi > 0
|
|
// 4. Crea "èNuova" = contattiRegistrati === 0
|
|
// 5. Crea "puòAccettare" = haPosti && appAttiva
|
|
// 6. Crea "èPiena" = !haPosti
|
|
//
|
|
// Stampa tutti i risultati.
|
|
//
|
|
// 💡 HINT: Usa ===, !==, &&, ||, ! come nell'esercizio 1 Capitolo 2.
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 3 — STRUTTURE CONDIZIONALI
|
|
// ============================================================================
|
|
|
|
// 📋 REQUISITO:
|
|
// 1. Dato un numero di telefono (string, es. "+39 333 1234567"):
|
|
// - Se inizia con "+39" → stampa "📱 Numero italiano"
|
|
// - Se inizia con "+1" → stampa "🇺🇸 Numero americano"
|
|
// - Altrimenti → stampa "🌍 Numero internazionale"
|
|
// HINT: usa stringa.startsWith("+39")
|
|
//
|
|
// 2. Data una categoria (string, es. "Lavoro"):
|
|
// Usa uno switch per stampare un'emoji:
|
|
// - "Famiglia" → "👨👩👧"
|
|
// - "Lavoro" → "💼"
|
|
// - "Amici" → "🎉"
|
|
// - "Altro" → "📌"
|
|
// - default → "❓"
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 4 — CICLI
|
|
// ============================================================================
|
|
|
|
// 📋 REQUISITO:
|
|
// 1. Dato questo array di numeri di telefono:
|
|
const telefoni = ["+39 333 111", "+1 555 222", "+39 06 333", "+44 20 444", "+39 02 555"];
|
|
//
|
|
// Usa un ciclo FOR per contare quanti numeri italiani ci sono
|
|
// (quelli che iniziano con "+39").
|
|
// Stampa: "Numeri italiani: X su Y"
|
|
//
|
|
// 2. Usa un ciclo WHILE per stampare:
|
|
// "Contatto 1 verificato" ... "Contatto 5 verificato"
|
|
//
|
|
// 💡 HINT: usa telefoni[i].startsWith("+39") dentro il ciclo.
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 5 — FUNZIONI
|
|
// ============================================================================
|
|
|
|
// 📋 REQUISITO:
|
|
// 1. Crea una funzione "formattaTelefono" che:
|
|
// - Riceve un numero grezzo (es. "3331234567")
|
|
// - Restituisce "+39 " + numero
|
|
//
|
|
// 2. Crea una funzione "emojiCategoria" che:
|
|
// - Riceve una categoria (string)
|
|
// - Restituisce l'emoji corrispondente (come il switch del Cap 3)
|
|
//
|
|
// 3. Crea una funzione "creaRiepilogo" che:
|
|
// - Riceve: nome, cognome, categoria
|
|
// - Usa emojiCategoria() per ottenere l'emoji
|
|
// - Restituisce: "EMOJI NOME COGNOME (CATEGORIA)"
|
|
// - Esempio: "💼 Mario Rossi (Lavoro)"
|
|
//
|
|
// Testa tutte e 3 le funzioni con console.log.
|
|
//
|
|
// 💡 HINT: Una funzione può chiamarne un'altra (come nell'Esercizio 1, Cap 5).
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 6 — ARRAY
|
|
// ============================================================================
|
|
|
|
// 📋 REQUISITO:
|
|
// 1. Crea un array "categorie" con: "Famiglia", "Lavoro", "Amici", "Altro"
|
|
// 2. Aggiungi "VIP" con .push()
|
|
// 3. Rimuovi l'ultimo elemento con .pop()
|
|
// 4. Stampa quanti elementi ci sono
|
|
// 5. Crea un array "nomiContatti" con almeno 4 nomi
|
|
// 6. Usa .map() per creare un nuovo array con i nomi in maiuscolo
|
|
// 7. Usa un for...of per stampare ogni nome con un prefisso "📇 "
|
|
//
|
|
// 💡 HINT: metodi array → .push(), .pop(), .map(), .length
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 7 — OGGETTI
|
|
// ============================================================================
|
|
|
|
// 📋 REQUISITO:
|
|
// 1. Crea un oggetto "contatto" con:
|
|
// nome, cognome, telefono, email, categoria, preferito (boolean)
|
|
//
|
|
// 2. Aggiungi una proprietà "dataCreazione" con la data di oggi:
|
|
// contatto.dataCreazione = new Date().toLocaleDateString();
|
|
//
|
|
// 3. Usa la destrutturazione per estrarre nome e cognome:
|
|
// const { nome, cognome } = contatto;
|
|
//
|
|
// 4. Crea un array "rubrica" con almeno 3 oggetti contatto
|
|
// (ognuno con: nome, cognome, telefono, email, categoria, preferito)
|
|
//
|
|
// 5. Usa un for...of per stampare ogni contatto della rubrica:
|
|
// "NOME COGNOME — TELEFONO (CATEGORIA)"
|
|
//
|
|
// 💡 HINT: L'array di oggetti è esattamente come "menu" nell'esercizio 1.
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 8 — DOM: SELEZIONE E MODIFICA
|
|
// ============================================================================
|
|
|
|
// 📋 REQUISITO:
|
|
// 1. Seleziona la statistica "stat-totale" e metti rubrica.length
|
|
// 2. Conta i preferiti nell'array rubrica (quelli con preferito === true)
|
|
// e metti il numero in "stat-preferiti"
|
|
// 3. Trova la categoria più frequente nell'array rubrica e mettila in "stat-categoria"
|
|
// 4. Seleziona "messaggio", scrivi "Rubrica caricata!", rendilo visibile,
|
|
// e aggiungi la classe "msg-successo"
|
|
//
|
|
// 💡 HINT: Per trovare la categoria più frequente, puoi usare un oggetto
|
|
// come contatore: const conteggio = {}; poi scorrere l'array e contare
|
|
// (o fare la soluzione semplice se ti blocchi).
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 9 — DOM: CREAZIONE ELEMENTI E EVENTI
|
|
// ============================================================================
|
|
|
|
// 📋 REQUISITO:
|
|
// 1. Crea una funzione "renderizzaTabella" che:
|
|
// - Seleziona #corpo-tabella
|
|
// - Lo svuota (innerHTML = "")
|
|
// - Per ogni contatto nell'array "rubrica", crea una <tr> con <td> per:
|
|
// Nome Completo, Telefono, Email, Categoria (con tag colorato), Azioni
|
|
// - Nella colonna Azioni, metti un bottone "Rimuovi" che rimuove il contatto
|
|
//
|
|
// STRUTTURA DI OGNI RIGA:
|
|
// const tr = document.createElement("tr");
|
|
// tr.innerHTML = '<td>' + contatto.nome + ' ' + contatto.cognome + '</td>' +
|
|
// '<td>' + contatto.telefono + '</td>' +
|
|
// '<td>' + contatto.email + '</td>' +
|
|
// '<td><span class="tag-CATEGORIA">' + contatto.categoria + '</span></td>' +
|
|
// '<td></td>';
|
|
// (Sostituisci CATEGORIA con la categoria in minuscolo per il CSS)
|
|
//
|
|
// 2. Chiama renderizzaTabella() per mostrare i contatti iniziali.
|
|
//
|
|
// 3. Implementa il bottone "btn-aggiungi":
|
|
// - Leggi i valori dal form
|
|
// - Crea un nuovo oggetto contatto
|
|
// - Aggiungilo all'array rubrica con .push()
|
|
// - Richiama renderizzaTabella()
|
|
// - Svuota il form
|
|
//
|
|
// 4. Implementa la ricerca su "input-cerca":
|
|
// - Evento "input"
|
|
// - Filtra l'array rubrica per nome O cognome che contiene il testo
|
|
// - Mostra solo i risultati nella tabella
|
|
//
|
|
// 💡 HINT: Per la classe del tag: "tag-" + contatto.categoria.toLowerCase()
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 10 — MANIPOLAZIONE DATI
|
|
// ============================================================================
|
|
|
|
// 📋 REQUISITO:
|
|
// 1. Crea una funzione "formattaNome" che:
|
|
// - Riceve un nome grezzo (es. " mario ")
|
|
// - Fa trim + prima lettera maiuscola + resto minuscolo
|
|
// - Restituisce il risultato
|
|
// (Applicala ai nomi quando aggiungi un contatto)
|
|
//
|
|
// 2. Crea una funzione "calcolaStatistiche" che:
|
|
// - Conta i contatti totali
|
|
// - Conta i preferiti
|
|
// - Trova la categoria più frequente
|
|
// - Restituisce un oggetto: { totale, preferiti, categoriaTop }
|
|
//
|
|
// 3. Usa template literals per stampare un riepilogo:
|
|
// `📊 Rubrica: ${stats.totale} contatti | ${stats.preferiti} preferiti | Top: ${stats.categoriaTop}`
|
|
//
|
|
// 4. Aggiorna le tre stat-box nel DOM con i dati calcolati.
|
|
//
|
|
// 💡 HINT: Per la categoria più frequente, crea un oggetto di conteggio:
|
|
// const conteggio = {};
|
|
// for (const c of rubrica) {
|
|
// if (conteggio[c.categoria]) conteggio[c.categoria]++;
|
|
// else conteggio[c.categoria] = 1;
|
|
// }
|
|
// Poi scorrilo per trovare la chiave con il valore più alto.
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 11 — LOCALSTORAGE
|
|
// ============================================================================
|
|
|
|
// 📋 REQUISITO:
|
|
// 1. Bottone "btn-salva" → salva l'array rubrica in localStorage
|
|
// Chiave: "rubrica-contatti"
|
|
// Mostra messaggio di successo.
|
|
//
|
|
// 2. Bottone "btn-carica" → carica da localStorage
|
|
// Se trovato: sovrascrivi rubrica, ri-renderizza tabella, aggiorna stats
|
|
// Se non trovato: mostra alert o messaggio errore.
|
|
//
|
|
// 3. Bottone "btn-reset" → svuota rubrica, tabella, statistiche, localStorage
|
|
//
|
|
// 💡 HINT: JSON.stringify() per salvare, JSON.parse() per caricare.
|
|
// Svuotare un array: rubrica.length = 0 poi .push() dei nuovi dati.
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// CAPITOLO 12 — BONUS
|
|
// ============================================================================
|
|
|
|
// 📋 SFIDE EXTRA (facoltative):
|
|
//
|
|
// 1. TOGGLE PREFERITO: Aggiungi un bottone ⭐ a ogni riga della tabella.
|
|
// Cliccandolo, cambia la proprietà "preferito" del contatto (true/false)
|
|
// e aggiorna il conteggio dei preferiti.
|
|
//
|
|
// 2. ORDINAMENTO: Aggiungi un bottone per ordinare la rubrica per cognome.
|
|
// HINT: rubrica.sort(function(a, b) { return a.cognome.localeCompare(b.cognome); });
|
|
//
|
|
// 3. ESPORTAZIONE: Crea un bottone che genera un riepilogo testuale di tutti
|
|
// i contatti e lo mostra in un alert() o in un elemento <pre>.
|
|
//
|
|
// 4. VALIDAZIONE EMAIL: Prima di aggiungere un contatto, verifica che l'email
|
|
// contenga "@" e "." — altrimenti mostra un errore.
|
|
|
|
// 👇 SCRIVI QUI IL TUO CODICE (Bonus)
|
|
|
|
|
|
|
|
// ✅ Se hai completato tutto, ben fatto! Hai ripassato TUTTO JavaScript!
|
|
// Hai dimostrato di saper usare JavaScript in autonomia!
|