110 lines
4.6 KiB
HTML
110 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Ripasso DOM</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold; font-size: 14px;">← Dashboard</a>
|
||
|
||
<div class="container">
|
||
<h1>🎓 Ripasso DOM - Step by Step</h1>
|
||
<p class="subtitle">Selettori, Manipolazione Testo, Eventi</p>
|
||
|
||
<!-- ============ STEP 1: SELETTORI ============ -->
|
||
<div class="step">
|
||
<h2>Step 1️⃣ - Selettori CSS</h2>
|
||
<p class="step-description">Impara a selezionare elementi dal DOM usando querySelector</p>
|
||
|
||
<div class="exercise">
|
||
<h3>Esercizio 1.1: Seleziona per ID</h3>
|
||
<p id="messaggio-id">Questo elemento ha un ID</p>
|
||
<p class="risultato" id="risultato-1-1">Aspettando...</p>
|
||
</div>
|
||
|
||
<div class="exercise">
|
||
<h3>Esercizio 1.2: Seleziona per Classe</h3>
|
||
<p class="testo-blu">Sono blu</p>
|
||
<p class="testo-blu">Anche io sono blu</p>
|
||
<p class="risultato" id="risultato-1-2">Aspettando...</p>
|
||
</div>
|
||
|
||
<div class="exercise">
|
||
<h3>Esercizio 1.3: Seleziona per Tag</h3>
|
||
<span>Sono uno span</span>
|
||
<span>Sono un altro span</span>
|
||
<p class="risultato" id="risultato-1-3">Aspettando...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ STEP 2: MANIPOLAZIONE TESTO ============ -->
|
||
<div class="step">
|
||
<h2>Step 2️⃣ - Manipolazione Testo</h2>
|
||
<p class="step-description">Cambia il contenuto dei tag usando textContent</p>
|
||
|
||
<div class="exercise">
|
||
<h3>Esercizio 2.1: Cambia Testo in un Paragrafo</h3>
|
||
<p id="paragrafo-da-cambiare">Clicca il bottone qui sotto per cambiarmi!</p>
|
||
<button id="btn-cambiaP">Cambia Testo</button>
|
||
<p class="risultato" id="risultato-2-1">Aspettando...</p>
|
||
</div>
|
||
|
||
<div class="exercise">
|
||
<h3>Esercizio 2.2: Scrivi nel DOM</h3>
|
||
<div id="area-scrittura" class="area-output"></div>
|
||
<button id="btn-scrivi">Scrivi nel DOM</button>
|
||
<p class="risultato" id="risultato-2-2">Aspettando...</p>
|
||
</div>
|
||
|
||
<div class="exercise">
|
||
<h3>Esercizio 2.3: Testo Dinamico</h3>
|
||
<input type="text" id="input-nome" placeholder="Scrivi il tuo nome">
|
||
<button id="btn-saluta">Saluta</button>
|
||
<p id="area-saluto" class="area-output"></p>
|
||
<p class="risultato" id="risultato-2-3">Aspettando...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ STEP 3: EVENTI ============ -->
|
||
<div class="step">
|
||
<h2>Step 3️⃣ - Eventi</h2>
|
||
<p class="step-description">Rispondi ai click dell'utente e agli input</p>
|
||
|
||
<div class="exercise">
|
||
<h3>Esercizio 3.1: Click Semplice</h3>
|
||
<button id="btn-click">Cliccami!</button>
|
||
<p id="contatore-click" class="area-output">Click: 0</p>
|
||
<p class="risultato" id="risultato-3-1">Aspettando...</p>
|
||
</div>
|
||
|
||
<div class="exercise">
|
||
<h3>Esercizio 3.2: Input Event</h3>
|
||
<p>Scrivi qualcosa e vedi il risultato in tempo reale:</p>
|
||
<input type="text" id="input-tempo-reale" placeholder="Digita qui...">
|
||
<p id="echo" class="area-output">Qui apparirà quello che scrivi...</p>
|
||
<p class="risultato" id="risultato-3-2">Aspettando...</p>
|
||
</div>
|
||
|
||
<div class="exercise">
|
||
<h3>Esercizio 3.3: Click su Elemento Specifico</h3>
|
||
<div class="box-click" id="box1">Box 1</div>
|
||
<div class="box-click" id="box2">Box 2</div>
|
||
<div class="box-click" id="box3">Box 3</div>
|
||
<p id="log-click" class="area-output">Log click:</p>
|
||
<p class="risultato" id="risultato-3-3">Aspettando...</p>
|
||
</div>
|
||
|
||
<div class="exercise">
|
||
<h3>Esercizio 3.4: Toggle Classe CSS (Bonus)</h3>
|
||
<p id="elemento-toggle" class="elemento-normale">Clicca su di me per cambiarmi</p>
|
||
<p class="risultato" id="risultato-3-4">Aspettando...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|