From eb02821a935574ed5250d0909f3f8c462da9fd71 Mon Sep 17 00:00:00 2001 From: viiivo <«vivien.vonburg@outlook.com»> Date: Mon, 23 Mar 2026 18:24:47 +0100 Subject: [PATCH] Added Comments in Code for better understanding. Did 2 Page solution for detail site so that detailsite has it's own url. Refactor event overview and detail pages: corrected title, enhanced event filtering, and added detail page structure. --- event_detail.html | 29 ++++++++++++++++++++ event_overview.html | 2 +- js/event_detail.js | 47 ++++++++++++++++++++++++++++++++ js/event_overview_script.js | 54 ++++++++++++++++++++++++++++--------- 4 files changed, 118 insertions(+), 14 deletions(-) create mode 100644 event_detail.html create mode 100644 js/event_detail.js diff --git a/event_detail.html b/event_detail.html new file mode 100644 index 0000000..22044dd --- /dev/null +++ b/event_detail.html @@ -0,0 +1,29 @@ + + + + + + Event-Detail + + + + +
+ + +
+ +
+
+

Lädt Event-Details...

+
+
+ + + + + + \ No newline at end of file diff --git a/event_overview.html b/event_overview.html index 89242fe..0fdc248 100644 --- a/event_overview.html +++ b/event_overview.html @@ -3,7 +3,7 @@ - Event_Overview + Event-Overview diff --git a/js/event_detail.js b/js/event_detail.js new file mode 100644 index 0000000..e34ebc6 --- /dev/null +++ b/js/event_detail.js @@ -0,0 +1,47 @@ +document.addEventListener('DOMContentLoaded', async () => { + const detailContainer = document.getElementById('detail-view'); + + // 1. ID aus der URL lesen (z.B. detail.html?id=1) + const params = new URLSearchParams(window.location.search); + const eventId = parseInt(params.get('id')); + + if (!eventId) { + window.location.href = 'event_overview.html'; + return; + } + + // 2. Daten laden und das richtige Event suchen + try { + const response = await fetch('data/events.json'); + const allEvents = await response.json(); + const event = allEvents.find(e => e.id === eventId); + + if (event) { + renderDetailPage(event); + } else { + detailContainer.innerHTML = "

Event wurde nicht gefunden.

Zurück zur Übersicht"; + } + } catch (error) { + console.error("Fehler beim Laden der Details:", error); + } + + function renderDetailPage(event) { + //Layout Deatilseite der Events mit Rücklink zur Übersicht, Eventtitel, Infos und Bild + detailContainer.innerHTML = ` +
+ ← +

${event.title}

+
+
+
+

📍 ${event.location} | 📅 ${event.date} | 👤 Max. ${event.spots} Personen

+
+

Hier kommen die detaillierten Infos zu ${event.title} hin...

+
+
+ ${event.title} +
+
+ `; + } +}); \ No newline at end of file diff --git a/js/event_overview_script.js b/js/event_overview_script.js index fe01ec7..4aa3c77 100644 --- a/js/event_overview_script.js +++ b/js/event_overview_script.js @@ -3,24 +3,52 @@ document.addEventListener('DOMContentLoaded', () => { const filterButtons = document.querySelectorAll('.category-item'); let allEvents = []; - // 1. Daten laden + // 1. Daten laden aus JSOn file async function fetchEvents() { try { - // Pfad an deine Ordnerstruktur angepasst + // Pfad zu JSON File angepasst an lokale Ordnerstruktur const response = await fetch('data/events.json'); allEvents = await response.json(); renderEvents(allEvents); + + // Beim Laden prüfen, ob ein Filter gespeichert war + const savedFilter = sessionStorage.getItem('activeFilter') || 'ALLE'; + applyFilter(savedFilter); + + //checked ob Fehler beim Laden oder Parsen der Daten auftreten } catch (error) { console.error("Fehler:", error); eventGrid.innerHTML = "

Events konnten nicht geladen werden.

"; } } + // Funktion um Filter anzuwenden und gleichzeitig UI zu aktualisieren + function applyFilter(category) { + // UI: Aktiven Button stylen + filterButtons.forEach(btn => { + if (btn.getAttribute('data-cat') === category) { + btn.classList.add('active'); + } else { + btn.classList.remove('active'); + } + }); + + // Daten filtern + const filtered = category === 'ALLE' + ? allEvents + : allEvents.filter(e => e.category === category); + + renderEvents(filtered); + + //Filter im Browser merken + sessionStorage.setItem('activeFilter', category); + + } // 2. Events rendern + "Empty State" Logik function renderEvents(events) { eventGrid.innerHTML = ''; - // PRÜFUNG: Wenn keine Events vorhanden sind + // PRÜFUNG: Wenn keine Events vorhanden sind zeigt folgende Nachricht if (events.length === 0) { eventGrid.innerHTML = `
@@ -36,6 +64,14 @@ document.addEventListener('DOMContentLoaded', () => { events.forEach(event => { const card = document.createElement('article'); card.className = 'event-card'; + + //Klick auf die gesamte Karte leitet zur Detailseite weiter + card.style.cursor = "pointer"; + card.onclick = () => { + window.location.href = `event_detail.html?id=${event.id}`; + }; + + //internes HTML im Js zur Styling der Event-Karte (HIER CHECKEN OB SO OK NACH CLEAN CODE) card.innerHTML = `
@@ -61,19 +97,11 @@ document.addEventListener('DOMContentLoaded', () => { }); } - // 3. Filter-Logik + // 3. Filter-Logik basic anhand der Kategorien im JSON File filterButtons.forEach(button => { button.addEventListener('click', () => { - filterButtons.forEach(btn => btn.classList.remove('active')); - button.classList.add('active'); - const selectedCat = button.getAttribute('data-cat'); - - const filtered = selectedCat === 'ALLE' - ? allEvents - : allEvents.filter(e => e.category === selectedCat); - - renderEvents(filtered); + applyFilter(selectedCat); }); });