Synthese: die Kartenliste

<div id="ziel"></div>
<p id="fuss"></p>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

p {
  margin: 0 0 0.75rem;
}

.karte {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
}

.preis {
  margin: 0;
  color: #57534e;
}

const daten = [
  { id: "html", titel: "HTML", preisCent: 0 },
  { id: "js", titel: "JavaScript", preisCent: 4900 },
];

const euro = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
});

// 1. Aus einem Datensatz ein Element. Kennt die Seite nicht.
function baueKarte(kurs) {
  const karte = document.createElement("article");
  karte.classList.add("karte");
  karte.dataset.id = kurs.id;

  const titel = document.createElement("h3");
  titel.textContent = kurs.titel;

  const preis = document.createElement("p");
  preis.classList.add("preis");
  preis.textContent = euro.format(kurs.preisCent / 100);

  karte.append(titel, preis);
  return karte;
}

// 2. Aus einer Liste eine Ansicht. Kennt das Ziel nur als Parameter.
function zeichne(liste, ziel) {
  ziel.replaceChildren();
  const sammler = document.createDocumentFragment();
  for (const kurs of liste) sammler.append(baueKarte(kurs));
  ziel.append(sammler);
}

// 3. Aus einer Liste ein Satz. Fasst gar nichts an.
function fasseZusammen(liste) {
  const summe = liste.reduce((s, kurs) => s + kurs.preisCent, 0);
  return `${liste.length} Kurse, ${euro.format(summe / 100)} gesamt`;
}

zeichne(daten, document.getElementById("ziel"));
document.getElementById("fuss").textContent = fasseZusammen(daten);

console.log(baueKarte(daten[0]).outerHTML);
console.log(fasseZusammen(daten));

<div id="ziel"></div>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

const daten = [{ id: "js", titel: "JavaScript" }];

// So nicht: sie baut UND hängt ein. Beides in einer Funktion.
function baueUndHaenge(kurs) {
  const karte = document.createElement("article");
  karte.textContent = kurs.titel;
  document.getElementById("ziel").append(karte);
}

baueUndHaenge(daten[0]);

// Der Preis dafür zeigt sich sofort: es gibt nichts zurück.
console.log("Rückgabe:", baueUndHaenge(daten[0]));

// Man kann sie nicht anderswo hinzeichnen lassen.
// Man kann sie nicht prüfen, ohne die Seite mitzudenken.
// Und man kann sie nicht in einem Fragment sammeln,
// denn sie hängt sich immer selbst in dasselbe Ziel.
console.log("Karten im Ziel:", document.getElementById("ziel").children.length);

<div id="ziel"></div>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

const kurse = [
  { id: "js", titel: "JavaScript", status: "live" },
  { id: "node", titel: "Node", status: "geplant" },
  { id: "css", titel: "CSS", status: "live" },
];

function zeichne(liste, ziel) {
  ziel.replaceChildren();

  // Erst auswählen, dann ordnen, dann bauen. In dieser Reihenfolge,
  // weil sortieren teurer ist als filtern.
  const sichtbar = liste
    .filter((kurs) => kurs.status === "live")
    .sort((a, b) => a.titel.localeCompare(b.titel));

  for (const kurs of sichtbar) {
    const el = document.createElement("article");
    el.dataset.id = kurs.id;
    el.textContent = kurs.titel;
    ziel.append(el);
  }
}

zeichne(kurse, document.getElementById("ziel"));
console.log(document.getElementById("ziel").innerHTML);

// filter hat eine neue Liste gemacht, das Original ist unberührt.
console.log("Original:", kurse.map((k) => k.titel).join(", "));