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

renamed js folder

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-05 01:30:42 +01:00
parent 97e36b8e29
commit 3d84295870
113 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
javascript/JS_Esercizi 08 - DOM+/00_ripasso/index.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ripasso DOM - Step by Step</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>