95 lines
3.1 KiB
JavaScript
95 lines
3.1 KiB
JavaScript
// US-01-02 Leistungsübersicht
|
|
// Markiert das gewählte Paket visuell und stellt die Auswahl bereit,
|
|
// damit US-01-03 (Pakete online buchen) später darauf aufbauen kann.
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
|
|
// JSON-Datei laden
|
|
const response = await fetch("data/pakete.json");
|
|
const daten = await response.json();
|
|
|
|
// Elemente aus dem HTML holen
|
|
const titel = document.querySelector(".pakete__titel");
|
|
const text = document.querySelector(".pakete__text");
|
|
const grid = document.querySelector(".pakete__grid");
|
|
|
|
// Intro mit Daten aus JSON füllen
|
|
titel.textContent = daten.intro.titel;
|
|
text.textContent = daten.intro.text;
|
|
|
|
// Vorhandenen Inhalt entfernen
|
|
grid.innerHTML = "";
|
|
|
|
// Für jedes Paket eine Karte erstellen
|
|
daten.pakete.forEach(paket => {
|
|
|
|
// Artikel erstellen
|
|
const karte = document.createElement("article");
|
|
karte.classList.add("paket-karte");
|
|
|
|
// Empfohlenes Paket bekommt zusätzliche Klasse
|
|
if (paket.empfohlen) {
|
|
karte.classList.add("paket-karte--empfohlen");
|
|
}
|
|
|
|
// Badge nur erstellen, wenn eines vorhanden ist
|
|
if (paket.badge) {
|
|
const badge = document.createElement("p");
|
|
badge.classList.add("paket-karte__badge");
|
|
badge.textContent = paket.badge;
|
|
karte.appendChild(badge);
|
|
}
|
|
|
|
// Name
|
|
const name = document.createElement("h3");
|
|
name.classList.add("paket-karte__name");
|
|
name.textContent = paket.name;
|
|
karte.appendChild(name);
|
|
|
|
// Preis
|
|
const preis = document.createElement("p");
|
|
preis.classList.add("paket-karte__preis");
|
|
|
|
const betrag = document.createElement("span");
|
|
betrag.classList.add("paket-karte__betrag");
|
|
betrag.textContent = `${paket.preis} €`;
|
|
|
|
const zeitraum = document.createElement("span");
|
|
zeitraum.classList.add("paket-karte__zeitraum");
|
|
zeitraum.textContent = `/ ${paket.zeitraum}`;
|
|
|
|
preis.appendChild(betrag);
|
|
preis.appendChild(zeitraum);
|
|
karte.appendChild(preis);
|
|
|
|
// Beschreibung
|
|
const beschreibung = document.createElement("p");
|
|
beschreibung.classList.add("paket-karte__beschreibung");
|
|
beschreibung.textContent = paket.beschreibung;
|
|
karte.appendChild(beschreibung);
|
|
|
|
// Leistungen
|
|
const liste = document.createElement("ul");
|
|
liste.classList.add("paket-karte__leistungen");
|
|
|
|
paket.leistungen.forEach(leistung => {
|
|
const punkt = document.createElement("li");
|
|
punkt.textContent = leistung;
|
|
liste.appendChild(punkt);
|
|
});
|
|
|
|
karte.appendChild(liste);
|
|
|
|
// Button
|
|
const button = document.createElement("button");
|
|
button.classList.add("paket-karte__cta");
|
|
button.type = "button";
|
|
button.textContent = "Paket wählen";
|
|
button.dataset.paket = paket.dataPaket;
|
|
|
|
karte.appendChild(button);
|
|
|
|
// Karte ins Grid einfügen
|
|
grid.appendChild(karte);
|
|
});
|
|
}); |