Esercizi JavaScript sul dom

di

Esercizio 1

Creare dinamicamente una lista HTML utilizzando JavaScript e il DOM, senza scrivere gli elementi <li> direttamente nell’HTML.

La lista dovrà essere come questa:

  • spotify
  • whatsapp
  • instagram

Istruzioni:

  • La lista dovrà essere popolata con questi elementi dell’array: app = [“spotify”, “whatsapp”, “instagram”].
  • Utilizzate un ciclo for o foreach.
  • Aggiungete una classe alla lista
  • Appendete la lista all’interno di un paragrafo

Esercizio 2

Creare dinamicamente elementi <p> nella pagina utilizzando JavaScript, ogni volta che l’utente preme il pulsante Invio con il contenuto inserito in una casella di input.

Nel file HTML sono presenti:

    • un input con id input-todo
    • un bottone con id pulsante

    Istruzioni:

    Quando l’utente preme il pulsante:

      • creare un elemento <p> tramite document.createElement
      • inserire nel paragrafo il testo scritto nell’input
      • assegnare al paragrafo un colore (es. lightblue)
      • aggiungere il paragrafo al document.body

      Soluzioni

      Esercizio 1

      let paragrafo = document.getElementById("paragrafo");
let lista = document.createElement("ul");

lista.classList.add("classe-llista");

let app = ["spotify", "whatsapp", "instagram"];

for (let i = 0; i < app.length; i++) {
    let li = document.createElement("li");
    li.textContent = app[i];
    lista.appendChild(li);
}

paragrafo.appendChild(lista);

      Esercizio 2

      let pulsante = document.getElementById("pulsante");
let input = document.getElementById("input-todo");

pulsante.addEventListener("click", function (){
    let par = document.createElement("p");
    par.style.color = "lightblue";
    par.textContent = input.value;
    document.body.appendChild(par);
});