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

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!".
*/