Berack/esercizi-web
1
0
Fork 0
Code Issues 1 Pull Requests Activity

esercizi di ripasso

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-25 23:06:51 +01:00
parent ad42224fb2
commit a396754ac6
5 changed files with 2349 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

445
javascript/ripasso_completo/esercizio_2_autonomo/index.html Normal file
View File

@@ -0,0 +1,445 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esercizio 2 — La Rubrica Contatti</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
/* ═══════════════════════════════════════════════════════
TEMA APP MODERNA — Accento Teal con glassmorphism
═══════════════════════════════════════════════════════ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'DM Sans', 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #e8f4f2 0%, #f0f4f8 40%, #ebe8f3 100%);
color: #2d3748;
padding: 24px;
line-height: 1.6;
min-height: 100vh;
}
.container {
max-width: 920px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 20px;
padding: 36px;
box-shadow:
0 1px 3px rgba(0,0,0,0.04),
0 8px 32px rgba(26,122,109,0.08);
border: 1px solid rgba(255,255,255,0.6);
}
h1 {
text-align: center;
font-size: 2.2em;
margin-bottom: 6px;
background: linear-gradient(135deg, #1a7a6d, #2c9f8f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.3px;
}
.sottotitolo {
text-align: center;
color: #94a3b8;
font-size: 0.9em;
font-weight: 500;
margin-bottom: 32px;
}
/* ─── STATISTICHE ─── */
#stats {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.stat-box {
background: linear-gradient(145deg, #ffffff, #f7fafc);
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 18px 28px;
text-align: center;
min-width: 150px;
position: relative;
overflow: hidden;
transition: all 0.25s ease;
}
.stat-box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #1a7a6d, #4fd1c5);
opacity: 0;
transition: opacity 0.25s;
}
.stat-box:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(26,122,109,0.1);
}
.stat-box:hover::after {
opacity: 1;
}
.stat-box .label {
font-size: 0.75em;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
}
.stat-box .valore {
font-size: 2em;
font-weight: 700;
background: linear-gradient(135deg, #1a7a6d, #38a89d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ─── FORM ─── */
.form-area {
background: linear-gradient(145deg, #f7faf9, #f0f9f7);
border: 1px solid #d5e8e4;
border-radius: 14px;
padding: 26px;
margin-bottom: 24px;
}
.form-area h2 {
font-size: 1.15em;
margin-bottom: 18px;
color: #1a7a6d;
font-weight: 700;
}
.form-riga {
display: flex;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.form-riga input,
.form-riga select {
flex: 1;
min-width: 160px;
padding: 11px 16px;
border: 1.5px solid #d5e8e4;
border-radius: 10px;
font-size: 0.95em;
font-family: inherit;
background: rgba(255,255,255,0.8);
color: #2d3748;
transition: all 0.25s ease;
}
.form-riga input:focus,
.form-riga select:focus {
outline: none;
border-color: #1a7a6d;
box-shadow: 0 0 0 3px rgba(26, 122, 109, 0.1);
background: #fff;
}
.form-riga input::placeholder {
color: #a0b4b0;
}
/* ─── BOTTONI ─── */
.bottoni {
display: flex;
gap: 10px;
margin-bottom: 24px;
flex-wrap: wrap;
}
button {
padding: 10px 22px;
border: none;
border-radius: 10px;
font-size: 0.9em;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.25s ease;
letter-spacing: 0.2px;
}
.btn-primario {
background: linear-gradient(135deg, #1a7a6d, #2c9f8f);
color: white;
box-shadow: 0 2px 10px rgba(26,122,109,0.25);
}
.btn-primario:hover {
box-shadow: 0 4px 16px rgba(26,122,109,0.35);
transform: translateY(-1px);
}
.btn-secondario {
background: rgba(255,255,255,0.7);
color: #4a5568;
border: 1.5px solid #d5e8e4;
}
.btn-secondario:hover {
background: #fff;
border-color: #1a7a6d;
transform: translateY(-1px);
}
.btn-danger {
background: #fff5f5;
color: #c53030;
border: 1.5px solid #fcc;
padding: 5px 12px;
font-size: 0.85em;
border-radius: 8px;
}
.btn-danger:hover {
background: #fed7d7;
border-color: #c53030;
}
/* ─── RICERCA ─── */
.ricerca-area {
margin-bottom: 22px;
}
.ricerca-area input {
width: 100%;
padding: 12px 18px;
border: 1.5px solid #d5e8e4;
border-radius: 24px;
font-size: 0.95em;
font-family: inherit;
background: rgba(255,255,255,0.8);
color: #2d3748;
transition: all 0.25s ease;
}
.ricerca-area input:focus {
outline: none;
border-color: #1a7a6d;
box-shadow: 0 0 0 3px rgba(26, 122, 109, 0.1);
background: #fff;
}
.ricerca-area input::placeholder {
color: #a0b4b0;
}
/* ─── TABELLA ─── */
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid #e2e8f0;
background: #fff;
}
thead {
background: linear-gradient(135deg, #f0faf8, #f7fafc);
}
th {
text-align: left;
padding: 13px 18px;
font-size: 0.78em;
text-transform: uppercase;
color: #1a7a6d;
letter-spacing: 0.8px;
font-weight: 700;
border-bottom: 2px solid #d5e8e4;
}
td {
padding: 13px 18px;
border-bottom: 1px solid #edf2f7;
color: #2d3748;
}
tbody tr {
transition: all 0.2s ease;
}
tbody tr:hover {
background: #f0faf8;
}
tbody tr:last-child td {
border-bottom: none;
}
/* ─── TAG CATEGORIA ─── */
.tag-famiglia {
background: linear-gradient(135deg, #c6f6d5, #9ae6b4);
color: #22543d;
padding: 3px 12px;
border-radius: 20px;
font-size: 0.82em;
font-weight: 600;
display: inline-block;
}
.tag-lavoro {
background: linear-gradient(135deg, #bee3f8, #90cdf4);
color: #2a4365;
padding: 3px 12px;
border-radius: 20px;
font-size: 0.82em;
font-weight: 600;
display: inline-block;
}
.tag-amici {
background: linear-gradient(135deg, #fefcbf, #faf089);
color: #744210;
padding: 3px 12px;
border-radius: 20px;
font-size: 0.82em;
font-weight: 600;
display: inline-block;
}
.tag-altro {
background: linear-gradient(135deg, #e2e8f0, #cbd5e0);
color: #4a5568;
padding: 3px 12px;
border-radius: 20px;
font-size: 0.82em;
font-weight: 600;
display: inline-block;
}
/* ─── MESSAGGIO ─── */
#messaggio {
display: none;
padding: 14px 18px;
border-radius: 10px;
margin-top: 18px;
font-weight: 600;
text-align: center;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.msg-successo {
background: linear-gradient(135deg, #c6f6d5, #d5f5e3);
color: #22543d;
border: 1px solid #9ae6b4;
}
.msg-errore {
background: linear-gradient(135deg, #fed7d7, #fde8e8);
color: #c53030;
border: 1px solid #feb2b2;
}
</style>
</head>
<body>
<div class="container">
<h1>📇 La Rubrica Contatti</h1>
<p class="sottotitolo">Esercizio semi-guidato</p>
<!-- STATISTICHE -->
<div id="stats">
<div class="stat-box">
<div class="label">Contatti</div>
<div class="valore" id="stat-totale">0</div>
</div>
<div class="stat-box">
<div class="label">Preferiti</div>
<div class="valore" id="stat-preferiti">0</div>
</div>
<div class="stat-box">
<div class="label">Categoria Top</div>
<div class="valore" id="stat-categoria">—</div>
</div>
</div>
<!-- FORM INSERIMENTO -->
<div class="form-area">
<h2>➕ Nuovo Contatto</h2>
<div class="form-riga">
<input type="text" id="input-nome" placeholder="Nome">
<input type="text" id="input-cognome" placeholder="Cognome">
</div>
<div class="form-riga">
<input type="tel" id="input-telefono" placeholder="Telefono">
<input type="email" id="input-email" placeholder="Email">
</div>
<div class="form-riga">
<select id="select-categoria">
<option value="">-- Categoria --</option>
<option value="Famiglia">👨‍👩‍👧 Famiglia</option>
<option value="Lavoro">💼 Lavoro</option>
<option value="Amici">🎉 Amici</option>
<option value="Altro">📌 Altro</option>
</select>
</div>
</div>
<!-- BOTTONI -->
<div class="bottoni">
<button class="btn-primario" id="btn-aggiungi">➕ Aggiungi Contatto</button>
<button class="btn-secondario" id="btn-salva">💾 Salva</button>
<button class="btn-secondario" id="btn-carica">📂 Carica</button>
<button class="btn-danger" id="btn-reset">🗑️ Reset</button>
</div>
<!-- RICERCA -->
<div class="ricerca-area">
<input type="text" id="input-cerca" placeholder="🔍 Cerca contatti per nome o cognome...">
</div>
<!-- TABELLA CONTATTI -->
<table>
<thead>
<tr>
<th>Nome</th>
<th>Telefono</th>
<th>Email</th>
<th>Categoria</th>
<th>Azioni</th>
</tr>
</thead>
<tbody id="corpo-tabella">
<!-- Le righe verranno create da JavaScript -->
</tbody>
</table>
<!-- MESSAGGIO -->
<div id="messaggio"></div>
</div>
<script src="script.js"></script>
</body>
</html>

310
javascript/ripasso_completo/esercizio_2_autonomo/script.js Normal file
View File

@@ -0,0 +1,310 @@
// ╔══════════════════════════════════════════════════════════════════════════════╗
// ║ 📇 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!