Creare Card Dinamiche

Traccia

Create un array di oggetti con delle proprietà come url dell’immagine, titolo e descrizione (3 oggetti vanno più che bene). Con questo array di oggetti dovete generare dinamicamente delle card con i rispettivi dati inseriti.

Vi fornisco io l’esempio di card CSS da riprodurre ed il file di Tailwind CSS da importare.

Se il risultato è corretto, ogni soluzione è valida.

Codice di Partenza

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Esercizio #5</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div id="container" class="flex flex-wrap w-1/2 m-10">
      <!-- Inizio card esempio -->
      <div class="w-full md:w-1/2 xl:w-1/3 px-4">
        <div class="bg-white rounded-lg overflow-hidden mb-10">
          <img
            src="https://img.freepik.com/free-vector/night-ocean-landscape-full-moon-stars-shine_107791-7397.jpg?w=2000"
            alt="image"
            class="w-full" />
          <div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
            <h3 class="font-semibold text-dark text-xl">Titolo di prova</h3>
            <p class="text-base text-body-color leading-relaxed mb-7">
              Lorem ipsum dolor sit amet pretium consectetur adipiscing elit.
              Lorem consectetur adipiscing elit.
            </p>
          </div>
        </div>
      </div>
      <!-- Fine card esempio -->
    </div>
  </body>
</html>

Soluzione

Metto solo la parte dello script Javascript per non ripetermi inutilmente.

Array di oggetti con i dati per le card come URL, titolo e descrizione.

const arr = [
  {
    url: "urlImmagine...",
    titolo: "Card Titolo 1",
    descrizione:
      "Lorem ipsum dolor sit amet pretium consectetur adipiscing elit. Lorem consectetur adipiscing elit.",
  },
  {
    url: "urlImmagine...",
    titolo: "Card Titolo 2",
    descrizione:
      "Lorem ipsum dolor sit amet pretium consectetur adipiscing elit. Lorem consectetur adipiscing elit.",
  },
  {
    url: "urlImmagine...",
    titolo: "Card Titolo 3",
    descrizione:
      "Lorem ipsum dolor sit amet pretium consectetur adipiscing elit. Lorem consectetur adipiscing elit.",
  },
];

Ciclo forEach su ogni oggetto dei dati per generare la Card.

arr.forEach((data) => {
  creaCard(data);
});

Funzioni effettiva che genera la singola Card.

function creaCard(data) {
  const card = document.createElement("div");
  card.className = "w-full md:w-1/2 xl:w-1/3 px-4";

  const innerDiv = document.createElement("div");
  innerDiv.className = "bg-white rounded-lg overflow-hidden mb-10 shadow-xl";
  card.appendChild(innerDiv);

  const immagine = document.createElement("img");
  immagine.src = data.url;
  immagine.className = "w-full";
  innerDiv.appendChild(immagine);

  const textContainer = document.createElement("div");
  textContainer.className = "p-8 sm:p-9 md:p-7 xl:p-9 text-center";
  innerDiv.appendChild(textContainer);

  const titolo = document.createElement("h3");
  titolo.className = "font-semibold text-dark text-xl";
  titolo.appendChild(document.createTextNode(data.titolo));
  textContainer.appendChild(titolo);

  const descrizione = document.createElement("p");
  descrizione.className = "text-base text-body-color leading-relaxed mb-7";
  descrizione.appendChild(document.createTextNode(data.descrizione));
  textContainer.appendChild(descrizione);

  document.getElementById("container").appendChild(card);
}