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

Esercizio 8: fix

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-03 19:07:27 +01:00
parent db80d0431c
commit 4c93abc7c0
8 changed files with 45 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/esercizi2/base.js
View File

@@ -5,6 +5,7 @@
* Simulare l'accensione delle luci di un semaforo modificando il colore di sfondo.
*
* ISTRUZIONI:
* 0. Controlla se nel file HTML è incluso questo script.
* 1. Seleziona i tre div delle luci (id: 'luce-rossa', 'luce-gialla', 'luce-verde').
* 2. Seleziona i due bottoni (id: 'btn-attiva-rosso', 'btn-attiva-verde').
* 3. Aggiungi un event listener al bottone "Attiva Rosso":
@@ -13,4 +14,3 @@
* 4. Fai lo stesso per il bottone "Attiva Verde" (luce passa da '#050' a '#0f0' o 'green').
*/
// Scrivi qui il tuo codice...

10
JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/esercizi2/contatore.js
View File

@@ -5,14 +5,14 @@
* Creare un contatore che aumenta ogni volta che si preme un bottone.
*
* ISTRUZIONI:
* 0. Controlla se nel file HTML è incluso questo script.
* 1. Seleziona lo span che contiene il numero (id: 'contatore-valore') e i bottoni.
* 2. Crea una variabile let `conteggio` inizializzata a 0.
* 3. Al click su 'btn-incrementa':
* - Aumenta la variabile `conteggio` di 1.
* - Aggiorna il testo dello span con il nuovo valore.
* - Aumenta la variabile `conteggio` di 1.
* - Aggiorna il testo dello span con il nuovo valore.
* 4. Al click su 'btn-reset':
* - Riporta `conteggio` a 0.
* - Aggiorna il testo dello span.
* - Riporta `conteggio` a 0.
* - Aggiorna il testo dello span.
*/
// Scrivi qui il tuo codice...

8
JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/esercizi2/debug.js
View File

@@ -6,15 +6,17 @@
* quando si preme il bottone. Ma non funziona o genera errore.
*
* TASK:
* 1. Apri la console e leggi l'errore quando clicchi il bottone.
* 2. Capisci perché `style` non funziona.
* 1. Apri il BROWSER esterno e leggi cosa mostra la console
* Se provi a cliccare il bottone dovrebbe apparire un messaggio di errore.
* 2. Capisci perché questo codice non funziona.
* Potrebbe essere un errore di selezione, di metodo, o di logica.
* 3. Correggi il codice.
*/
const bottone = document.getElementById('btn-colora-tutti');
const paragrafi = document.querySelectorAll('.testo-colorato');
bottone.addEventListener('click', function() {
bottone.addEventListener('click', () => {
paragrafi.style.color = 'blue';
console.log("Colorati!");
});

9
JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/esercizio.html
View File

@@ -17,9 +17,15 @@
#messaggio-sistema { padding: 10px; background: #ffcccc; border: 1px solid red; color: darkred; margin-bottom: 20px; }
/* Stili per esercizi della parte 2 */
.esercizio-box { min-height: 50px; border: 1px dashed #999; padding: 10px; margin: 10px 0; }
.error { color: red; }
.success { color: green; }
/* Stili per parte Extra */
#zona-extra ul { list-style-type: none; padding-left: 20px; display: flex; gap: 10px; }
#zona-extra ul > li { margin: 5px 0; border: 1px solid #ccc; padding: 10px; border-radius: 4px; background: #f0f0f0; }
.esercizio-box { min-height: 50px; border: 1px dashed #999; padding: 10px; margin: 10px 0; max-width: 320px; }
#container-extra-box { display: flex; gap: 10px; flex-wrap: wrap; }
#zona-extra input { padding: 5px; font-size: 16px; border-radius: 4px; border: 2px solid #ccc; }
</style>
</head>
<body>
@@ -82,5 +88,6 @@
<script src="esercizi1/modifica_stile.js"></script>
<script src="esercizi1/modifica_testo.js"></script>
<!-- Collega qui i tuoi script per la parte 2 & extra -->
<script src="extra/validatore_input.js"></script>
</body>
</html>

18
JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/extra/debug_avanzato.js
View File

@@ -13,18 +13,20 @@
// Setup del DOM per l'esercizio
// NON TOCCARE QUESTA PARTE, SERVE PER L'ESERCIZIO
const container = document.getElementById('container-extra-debug');
const container = document.querySelector('#container-extra-debug');
container.innerHTML = `
<ul id="lista-a"><li>Item 1</li></ul>
<ul id="lista-b"></ul>
<p>Lista A:</p>
<ul id="lista-a"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>
<p>Lista B:</p>
<ul id="lista-b"><li>Item</li></ul>
`;
// CODICE BUGGATO:
const item = document.querySelector('li');
const listaB = document.getElementById('lista-b');
// Vogliamo che cliccando su un item della Lista A, questo venga spostato nella Lista B.
// MA il codice attuale non funziona come previsto.
const tuttiItem = document.querySelectorAll('#lista-a > li');
const listaB = document.querySelector('#lista-b');
// Vogliamo che al click, l'item vada nella lista B
item.addEventListener('click', function () {
// Codice attuale che non fa nulla o da errore se non completato:
tuttiItem.forEach(item => {
listaB.innerHTML = item;
});

14
JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/extra/generatore_box.js
View File

@@ -8,9 +8,11 @@
* 1. Seleziona il div 'container-extra-box' nella pagina esercizi.html.
* 2. Crea un array di colori: const colori = ['red', 'blue', 'green', 'orange', 'purple'];
* 3. Usa un ciclo `for` che va da 0 a 4 (o lunghezza array):
* - Crea un nuovo `div`.
* - Assegnagli una larghezza e altezza di 100px.
* - Assegnagli il colore di sfondo prendendolo dall'array in base all'indice.
* - Aggiungi un evento 'click' al div: quando cliccato, il div deve rimuoversi da solo (`this.remove()`).
* - Aggiungi il div al 'container-extra-box'.
*/
* Per ogni iterazione:
* - Crea un nuovo `div` e salvalo in una variabile `box`.
* - Assegnagli una larghezza e altezza di 100px (style)
* - Assegnagli il colore di sfondo prendendolo dall'array in base all'indice.
* - Aggiungi un event listener 'click' che rimuove il div quando viene cliccato. (box.remove())
* - Aggiungi il div al 'container-extra-box'.
*/

12
JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/extra/validatore_input.js
View File

@@ -6,11 +6,13 @@
*
* ISTRUZIONI (Usa 'container-extra-validatore' per generare l'HTML necessario via JS o scrivilo a mano):
* 1. Crea/Inserisci un input type="text" e un paragrafo per il messaggio di errore.
* Inseriscili dentro il div con id 'container-extra-validatore' (puoi farlo via JS o scrivendoli direttamente nell'HTML).
* 2. Ascolta l'evento 'input' (mentre l'utente scrive).
* 3. Se la lunghezza del valore (`value.length`) è inferiore a 5 caratteri:
* - Bordo dell'input: Rosso.
* - Messaggio: "Troppo corto!".
* - Bordo dell'input: Rosso.
* - Messaggio: "Troppo corto!".
* 4. Se la lunghezza è 5 o più:
* - Bordo dell'input: Verde.
* - Messaggio: "OK!".
*/
* - Bordo dell'input: Verde.
* - Messaggio: "OK!".
*/

2
JS_Esercizi/JS_Esercizi 08 - DOM/tutorial_interattivo_parte2.js
View File

@@ -45,7 +45,7 @@
*/
// TODO: Seleziona l'input con id 'input-utente' e lo span con id 'output-testo'.
// TODO: Aggiungi un listener 'input' al campo di testo.
// TODO: Nella funzione, copia il valore dell'input (`input.value`) dentro l'`textContent` dello span.
// TODO: Nella funzione, copia il valore dell'input (`input.value`) dentro il `textContent` dello span.
/**