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

81
javascript/ripasso_completo/README.md Normal file
View File

@@ -0,0 +1,81 @@
# 🎯 Ripasso Completo JavaScript — Piano Esercizi
## Obiettivo
Questi due esercizi coprono **TUTTO** il programma JavaScript, dal primo `console.log` fino a `localStorage`.
Sono pensati per essere fatti **in autonomia**, senza bisogno di aiuto, a patto di seguire le istruzioni passo passo e di non saltare nessun concetto.
---
## Come fare gli esercizi
1. Fai la fork di questo repository (in alto a destra)
2. Clona la tua copia sul computer
3. Apri il file `index.html` del primo esercizo sul browser
4. Apri la **Console del browser** (F12 → Console)
5. Lavora sul file `script.js` del primo esercizio seguendo i capitoli dall'alto al basso
6. Guarda l'output nella console per verificare che stai facendo giusto
7. **Non saltare nessun step** — ogni step usa ciò che hai fatto prima
8. Salva e ricarica la pagina per vedere i risultati
9. Quando hai finito il primo esercizio, ripeti i passaggi 3-8 per il secondo esercizio
---
## Struttura
### Esercizio 1 — "Il Menu della Pizzeria" (GUIDATO)
Un esercizio **guidato** che funziona anche come tutorial.
Per OGNI concetto trovi:
- 📖 **Spiegazione** del concetto (cosa fa e perché serve)
- 💡 **Esempio** funzionante da leggere
- ✏️ **TODO** — il codice che devi scrivere tu
- ✅ **Output atteso** — per verificare che hai fatto giusto
**Argomenti coperti (22 step):**
| Step | Argomento | Capitolo |
| ---- | ---------------------------------- | -------- |
| 1 | console.log, variabili, tipi | 1 |
| 2 | const vs let, typeof | 1 |
| 3 | Operatori aritmetici | 2 |
| 4 | Operatori di confronto e logici | 2 |
| 5 | if / else | 3 |
| 6 | else if, switch | 3 |
| 7 | Ciclo while | 4 |
| 8 | Ciclo for, break, continue | 4 |
| 9 | Funzioni base | 5 |
| 10 | Funzioni con return | 5 |
| 11 | Array: creazione e metodi | 6 |
| 12 | Array: iterazione e map | 6 |
| 13 | Oggetti: creazione e accesso | 7 |
| 14 | Oggetti: annidati e destruttura | 7 |
| 15 | DOM: selezione e modifica testo | 8 |
| 16 | DOM: stili e classList | 8 |
| 17 | DOM: createElement e append | 9 |
| 18 | DOM: addEventListener | 9 |
| 19 | Manipolazione stringhe | 10 |
| 20 | Math e template literals | 10 |
| 21 | localStorage: salvare | 11 |
| 22 | localStorage: caricare | 11 |
---
### Esercizio 2 — "La Rubrica Contatti" (SEMI-GUIDATO)
Stessi concetti dell'Esercizio 1, ma con **meno aiuto**:
- Solo il **requisito** (cosa devi fare)
- Un **hint** breve (suggerimento)
- Nessun esempio, nessun output scritto
Se ti blocchi, torna all'Esercizio 1 per rivedere il concetto.
---
## Regola d'oro
> **Se non ricordi come si fa qualcosa, rileggilo nell'Esercizio 1.**\
> **Se ancora non capisci, prova a cercarlo online o negli appunti.**\
> **Se tutto fallisce, chiedere al professore.**

417
javascript/ripasso_completo/esercizio_1_guidato/index.html Normal file
View File

@@ -0,0 +1,417 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esercizio 1 — Il Menu della Pizzeria</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', 'Segoe UI', sans-serif;
background: #faf6f1;
background-image:
radial-gradient(circle at 20% 50%, rgba(211,84,0,0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(243,156,18,0.04) 0%, transparent 50%);
color: #3d2c1e;
padding: 24px;
line-height: 1.6;
min-height: 100vh;
}
/* ============ HEADER ============ */
.header {
text-align: center;
margin-bottom: 32px;
}
h1 {
font-family: 'Playfair Display', Georgia, serif;
color: #c0392b;
font-size: 2.4em;
margin-bottom: 4px;
letter-spacing: -0.5px;
text-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.subtitle {
color: #8b7355;
font-size: 0.9em;
font-weight: 500;
letter-spacing: 0.3px;
}
.decorazione {
margin: 12px auto;
width: 80px;
height: 3px;
background: linear-gradient(90deg, transparent, #d35400, transparent);
border-radius: 2px;
}
/* ============ AREA INTERATTIVA ============ */
#area-menu {
background: #fffcf8;
border: 1px solid #e8ddd0;
border-radius: 16px;
padding: 28px 30px;
margin: 0 auto;
max-width: 820px;
box-shadow:
0 1px 3px rgba(139,115,85,0.06),
0 8px 24px rgba(139,115,85,0.08);
}
#area-menu h2 {
font-family: 'Playfair Display', Georgia, serif;
color: #c0392b;
font-size: 1.5em;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px dashed #e8ddd0;
}
#area-menu h3 {
color: #5d4e37;
margin: 20px 0 10px 0;
font-size: 1em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
font-size: 0.85em;
}
#area-menu h3::before {
content: '— ';
color: #d35400;
}
/* ============ FORM ============ */
#form-container {
background: linear-gradient(135deg, #fdf4ec 0%, #fef9f4 100%);
border: 1px solid #e8ddd0;
border-radius: 12px;
padding: 22px;
margin: 16px 0;
}
.form-group {
margin-bottom: 14px;
}
label {
display: block;
color: #6b5b4a;
margin-bottom: 5px;
font-size: 0.85em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
input[type="text"],
input[type="number"],
select {
width: 100%;
max-width: 380px;
padding: 10px 14px;
background: #fff;
border: 1px solid #d4c5b3;
border-radius: 8px;
color: #3d2c1e;
font-size: 0.95em;
font-family: inherit;
transition: all 0.25s ease;
}
input::placeholder {
color: #b8a898;
}
input:focus, select:focus {
outline: none;
border-color: #d35400;
box-shadow: 0 0 0 3px rgba(211,84,0,0.1);
background: #fffaf5;
}
/* ============ BOTTONI ============ */
button {
padding: 10px 22px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.9em;
font-weight: 600;
font-family: inherit;
margin: 5px 5px 5px 0;
transition: all 0.25s ease;
letter-spacing: 0.2px;
}
.btn-primary {
background: linear-gradient(135deg, #d35400, #e67e22);
color: #fff;
box-shadow: 0 2px 8px rgba(211,84,0,0.25);
}
.btn-primary:hover {
background: linear-gradient(135deg, #bf4900, #d35400);
box-shadow: 0 4px 12px rgba(211,84,0,0.35);
transform: translateY(-1px);
}
.btn-danger {
background: #fff;
color: #c0392b;
border: 1.5px solid #e5c5c0;
}
.btn-danger:hover {
background: #fdf0ee;
border-color: #c0392b;
}
.btn-secondary {
background: #f5ede4;
color: #5d4e37;
border: 1px solid #d4c5b3;
}
.btn-secondary:hover {
background: #efe4d8;
transform: translateY(-1px);
}
/* ============ LISTA PIZZE ============ */
#lista-pizze {
list-style: none;
padding: 0;
}
#lista-pizze li {
background: #fff;
border: 1px solid #e8ddd0;
border-left: 4px solid #d35400;
border-radius: 0 10px 10px 0;
padding: 14px 18px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.2s ease;
}
#lista-pizze li:hover {
background: #fef9f4;
box-shadow: 0 2px 8px rgba(139,115,85,0.1);
transform: translateX(4px);
}
#lista-pizze li .info-pizza { flex: 1; }
#lista-pizze li .nome-pizza {
color: #c0392b;
font-weight: 700;
font-size: 1.05em;
}
#lista-pizze li .dettagli-pizza {
color: #8b7355;
font-size: 0.85em;
margin-top: 2px;
}
/* ============ STATISTICHE ============ */
#stats-container {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin: 16px 0;
}
.stat-box {
background: #fff;
border: 1px solid #e8ddd0;
border-radius: 12px;
padding: 16px 22px;
min-width: 130px;
text-align: center;
position: relative;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.stat-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #d35400, #f39c12);
}
.stat-box:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(139,115,85,0.12);
}
.stat-box .stat-valore {
font-size: 1.9em;
font-weight: 700;
color: #d35400;
font-family: 'Playfair Display', Georgia, serif;
}
.stat-box .stat-label {
font-size: 0.75em;
color: #8b7355;
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
/* ============ RICERCA ============ */
#ricerca-container {
margin: 18px 0;
}
#input-ricerca {
max-width: 420px;
border-radius: 20px;
padding-left: 18px;
}
/* ============ MESSAGGI ============ */
#messaggio {
padding: 12px 18px;
border-radius: 10px;
margin: 12px 0;
display: none;
font-size: 0.9em;
font-weight: 500;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.msg-successo {
background: linear-gradient(135deg, #eafaf1, #d5f5e3);
border: 1px solid #82e0aa;
color: #1e8449;
}
.msg-errore {
background: linear-gradient(135deg, #fdf0ee, #fadbd8);
border: 1px solid #f1948a;
color: #c0392b;
}
/* ============ UTILITY ============ */
.nascosto { display: none !important; }
hr {
border: none;
border-top: 1px dashed #d4c5b3;
margin: 22px 0;
}
.tag {
display: inline-block;
background: linear-gradient(135deg, #fef5e7, #fdebd0);
color: #d35400;
padding: 3px 10px;
border-radius: 6px;
font-size: 0.78em;
font-weight: 600;
margin: 2px;
}
</style>
</head>
<body>
<div class="header">
<h1>🍕 Il Menu della Pizzeria</h1>
<div class="decorazione"></div>
<p class="subtitle">Ripasso completo JavaScript (guidato)</p>
</div>
<!-- ============ AREA INTERATTIVA PRINCIPALE ============ -->
<div id="area-menu">
<h2 id="titolo-menu">Il Nostro Menu</h2>
<!-- Messaggio feedback -->
<div id="messaggio"></div>
<!-- Statistiche -->
<div id="stats-container">
<div class="stat-box">
<div class="stat-valore" id="stat-totale">0</div>
<div class="stat-label">Pizze nel Menu</div>
</div>
<div class="stat-box">
<div class="stat-valore" id="stat-media">0</div>
<div class="stat-label">Prezzo Medio</div>
</div>
<div class="stat-box">
<div class="stat-valore" id="stat-piu-cara">-</div>
<div class="stat-label">Più Costosa</div>
</div>
</div>
<!-- Form aggiunta pizza -->
<div id="form-container">
<h3>Aggiungi una Pizza</h3>
<div class="form-group">
<label for="input-nome">Nome della pizza</label>
<input type="text" id="input-nome" placeholder="es. Margherita">
</div>
<div class="form-group">
<label for="input-ingredienti">Ingredienti principali</label>
<input type="text" id="input-ingredienti" placeholder="es. Pomodoro, mozzarella, basilico">
</div>
<div class="form-group">
<label for="input-prezzo">Prezzo (€)</label>
<input type="number" id="input-prezzo" placeholder="es. 8.50" min="1" max="50" step="0.50">
</div>
<div class="form-group">
<label for="select-categoria">Categoria</label>
<select id="select-categoria">
<option value="">-- Scegli --</option>
<option value="Classica">Classica</option>
<option value="Speciale">Speciale</option>
<option value="Gourmet">Gourmet</option>
<option value="Stagionale">Stagionale</option>
</select>
</div>
<button class="btn-primary" id="btn-aggiungi">Aggiungi Pizza</button>
<button class="btn-secondary" id="btn-reset">Reset Menu</button>
<button class="btn-secondary" id="btn-salva">💾 Salva</button>
<button class="btn-secondary" id="btn-carica">📂 Carica</button>
</div>
<!-- Ricerca -->
<div id="ricerca-container">
<h3>Cerca nel Menu</h3>
<input type="text" id="input-ricerca" placeholder="Cerca per nome...">
</div>
<!-- Lista pizze -->
<h3>Menu Attuale</h3>
<ul id="lista-pizze">
<!-- Le pizze appariranno qui -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>

1096
javascript/ripasso_completo/esercizio_1_guidato/script.js Normal file
View File

File diff suppressed because it is too large Load Diff

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!