From 312e78836449ce575c36a493106c535a327423a3 Mon Sep 17 00:00:00 2001 From: Vincent Laux <3019006@stud.hs-mannheim.de> Date: Thu, 24 Sep 2026 18:01:09 +0200 Subject: [PATCH] =?UTF-8?q?V-US-01-02:=20Leistungs=C3=BCbersicht=20Packete?= =?UTF-8?q?=20in=20Json=20gekappselt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 65 +++--------------------------- js/script.js | 100 +++++++++++++++++++++++++++++++++++++++-------- json/pakete.json | 55 ++++++++++++++++++++++++++ 3 files changed, 144 insertions(+), 76 deletions(-) create mode 100644 json/pakete.json diff --git a/index.html b/index.html index fb2ee74..e5bf0a7 100644 --- a/index.html +++ b/index.html @@ -14,72 +14,17 @@ +
-

Deine Pakete

-

- Drei Wege zu einer Ernährung, die zu deinem Training, deinem Alltag und - deinem Alter passt – entwickelt für Triathletinnen und Triathleten ab 50. -

+

+

-
- -
-

Starter

-

- 79 € - / Monat -

-

Für den Einstieg in eine bewusste Ernährung neben dem Training.

-
    -
  • Erstgespräch & Bedarfsanalyse
    • -
  • Individueller Ernährungsplan
    • -
  • Monatliches Check-in per E-Mail
    • -
  • Zugang zu Beispielplänen
    • -
- -
- -
-

Beliebteste Wahl

-

STANDART

-

- 149 € - / Monat -

-

Laufende Begleitung für alle, die regelmäßig für Wettkämpfe trainieren.

-
    -
  • Alles aus Starter
    • -
  • Plan-Anpassung je Trainingsphase
    • -
  • Zwei Beratungsgespräche pro Monat
    • -
  • Wettkampf-Ernährungsstrategie
    • -
  • Direkter Chat mit deiner Beraterin
    • -
- -
- -
-

Rundum Sorglos Paket

-

- 249 € - / Monat -

-

Volle Betreuung für ambitionierte Athletinnen und Athleten.

-
    -
  • Alles aus Ausdauer
    • -
  • Wöchentliche Beratungsgespräche
    • -
  • Individuelle Supplement-Empfehlung
    • -
  • Betreuung am Wettkampftag
    • -
  • Priorisierter Support
    • -
- -
- -
+
- + diff --git a/js/script.js b/js/script.js index 90d8232..4cd970d 100644 --- a/js/script.js +++ b/js/script.js @@ -2,26 +2,94 @@ // 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", () => { - const karten = document.querySelectorAll(".paket-karte"); +document.addEventListener("DOMContentLoaded", async () => { - karten.forEach((karte) => { - const button = karte.querySelector(".paket-karte__cta"); - if (!button) return; + // JSON-Datei laden + const response = await fetch("data/pakete.json"); + const daten = await response.json(); - button.addEventListener("click", () => { - karten.forEach((k) => k.classList.remove("paket-karte--ausgewaehlt")); - karte.classList.add("paket-karte--ausgewaehlt"); + // Elemente aus dem HTML holen + const titel = document.querySelector(".pakete__titel"); + const text = document.querySelector(".pakete__text"); + const grid = document.querySelector(".pakete__grid"); - const paketName = button.dataset.paket; + // Intro mit Daten aus JSON füllen + titel.textContent = daten.intro.titel; + text.textContent = daten.intro.text; - // Andere Skripte (z. B. die Buchungsstrecke aus US-01-03) - // können auf dieses Event hören, statt den DOM abzufragen. - document.dispatchEvent( - new CustomEvent("paket:ausgewaehlt", { detail: { paket: paketName } }) - ); + // Vorhandenen Inhalt entfernen + grid.innerHTML = ""; - console.log(`Paket "${paketName}" ausgewählt.`); + // 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); }); -}); +}); \ No newline at end of file diff --git a/json/pakete.json b/json/pakete.json new file mode 100644 index 0000000..482b2d5 --- /dev/null +++ b/json/pakete.json @@ -0,0 +1,55 @@ +{ + "intro": { + "titel": "Deine Pakete", + "text": "Drei Wege zu einer Ernährung, die zu deinem Training, deinem Alltag und deinem Alter passt – entwickelt für Triathletinnen und Triathleten ab 50." + }, + "pakete": [ + { + "name": "Starter", + "preis": 79, + "zeitraum": "Monat", + "beschreibung": "Für den Einstieg in eine bewusste Ernährung neben dem Training.", + "leistungen": [ + "Erstgespräch & Bedarfsanalyse", + "Individueller Ernährungsplan", + "Monatliches Check-in per E-Mail", + "Zugang zu Beispielplänen" + ], + "badge": null, + "empfohlen": false, + "dataPaket": "Starter" + }, + { + "name": "STANDART", + "preis": 149, + "zeitraum": "Monat", + "beschreibung": "Laufende Begleitung für alle, die regelmäßig für Wettkämpfe trainieren.", + "leistungen": [ + "Alles aus Starter", + "Plan-Anpassung je Trainingsphase", + "Zwei Beratungsgespräche pro Monat", + "Wettkampf-Ernährungsstrategie", + "Direkter Chat mit deiner Beraterin" + ], + "badge": "Beliebteste Wahl", + "empfohlen": true, + "dataPaket": "Ausdauer" + }, + { + "name": "Rundum Sorglos Paket", + "preis": 249, + "zeitraum": "Monat", + "beschreibung": "Volle Betreuung für ambitionierte Athletinnen und Athleten.", + "leistungen": [ + "Alles aus Ausdauer", + "Wöchentliche Beratungsgespräche", + "Individuelle Supplement-Empfehlung", + "Betreuung am Wettkampftag", + "Priorisierter Support" + ], + "badge": null, + "empfohlen": false, + "dataPaket": "Wettkampf" + } + ] +} \ No newline at end of file