Corso recupero jacascript lezione 18

<!DOCTYPE html>
<!-- La cartella img contiene alcune immagini a piacere. La pagina contiene
 un div (nascosto) in cui via Javascript alla partenza della pagina dovranno
 essere aggiunte  tutte le immagini  (createElement e un metodo di inserimento).

Un secondo div é inizialmente vuoto; cliccando su un bottone la prima img
viene TOLTA dal div nascosto e inserita nel div visibile; questo fino ad
eventuale esaurimento delle immagini nascoste

Cliccando su una immagine questa viene tolta dal div visibile e rimessa in
quello invisibile
-->

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lista Dinamica Immagini</title>
  <style>
    #lista_immagini {
      display: flex;
      gap: 10px;
      margin: 10px 0;
    }

    #lista_nascosta {display: none;}

    img {
      width: 100px;
      height: auto;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Lista Dinamica Immagini</h1>

  <div id="lista_immagini">
    <!-- Qui le immagini aggiunte dinamicamente -->
  </div>

  <button id="aggiungi_immagine">Aggiungi immagine</button>
  <div id="lista_nascosta">

  </div>

<script >
  const lista_immagini = document.getElementById('lista_immagini');
  const lista_nascosta = document.getElementById('lista_nascosta');

  //aggiungiamo le immagini
  const num_img = 9; //su file lago0, lago1 ... lago7

  for (let i=0; i<num_img; i++)
  {
    const immagine = document.createElement("img");
    immagine.setAttribute("src", "img/lago"+i+".jpeg");

    //nascondila al click
    immagine.addEventListener("click", () => lista_nascosta.appendChild(immagine));

    //aggiungi l'immagine alla lista nascosta
    lista_nascosta.appendChild( immagine );
  }


  document.getElementById('aggiungi_immagine').addEventListener('click', function() {
    const prima_immagine_nascosta = lista_nascosta.querySelector('img');

    if (prima_immagine_nascosta)
        lista_immagini.appendChild(prima_immagine_nascosta);
    else
      alert('Nessuna immagine disponibile!');
  });

  </script>

</body>
</html>