Service layer architecture fixed, error handling fixed

index.html

@@ -57,10 +57,10 @@
         >
 
         <!-- Date -->
-        <label>From</label>
+        <label for="date-from">From</label>
         <input id="date-from" type="date">
 
-        <label>To</label>
+        <label for="date-to">To</label>
         <input id="date-to" type="date">
 
         <!-- Category -->

js/app.js

@@ -1,4 +1,4 @@
-import { fetchEvents } from "./api/ticketmaster.js";
+import { getEvents } from "./services/eventService.js";
 import { renderEventList } from "./ui/eventList.js";
 import { getFilters } from "./ui/filters.js";
 
@@ -9,9 +9,7 @@ const cityInput = document.querySelector("#city-input");
 button.addEventListener("click", handleSearch);
 
 cityInput.addEventListener("keydown", (event) => {
-  if (event.key === "Enter") {
+  if (event.key === "Enter") handleSearch();
-    handleSearch();
-  }
 });
 
 async function handleSearch() {
@@ -19,13 +17,13 @@ async function handleSearch() {
   const { city, dateFrom, dateTo, category } = getFilters();
 
   if (!city) {
-    container.innerHTML = "Please enter a city.";
+    container.innerHTML = "<p class='text-danger'>Please enter a city.</p>";
     return;
   }
 
-  container.innerHTML = "Loading events...";
+  container.innerHTML = "<p class='text-muted'>Loading events...</p>";
 
-  const events = await fetchEvents(city);
+  const events = await getEvents(city);
 
   const filteredEvents = applyFilters(events, dateFrom, dateTo, category);
 
@@ -36,19 +34,13 @@ function applyFilters(events, dateFrom, dateTo, category) {
 
   return events.filter(event => {
 
-    const eventDate = event.dates.start.localDate;
+    const matchDateFrom = dateFrom ? event.date >= dateFrom : true;
-
+    const matchDateTo = dateTo ? event.date <= dateTo : true;
-    const eventCategory =
-      event.classifications?.[0]?.segment?.name?.toLowerCase();
-
-    const matchDateFrom = dateFrom ? eventDate >= dateFrom : true;
-    const matchDateTo = dateTo ? eventDate <= dateTo : true;
 
     const matchCategory = category
-      ? eventCategory === category
+      ? event.category && event.category.includes(category)
       : true;
 
     return matchDateFrom && matchDateTo && matchCategory;
   });
-
 }

js/services/eventService.js

@@ -6,7 +6,11 @@ export async function getEvents(city) {
   return events.map(event => ({
     id: event.id,
     name: event.name,
-    date: event.dates.start.localDate,
+    date: event.dates?.start?.localDate || null,
-    venue: event._embedded?.venues[0]?.name
+    time: event.dates?.start?.localTime || null,
+    venue: event._embedded?.venues?.[0]?.name || "Unknown venue",
+    category: event.classifications?.[0]?.segment?.name
+      ? event.classifications[0].segment.name.toLowerCase()
+      : null
   }));
 }

js/ui/eventCard.js

@@ -3,36 +3,35 @@ export function createEventCard(event) {
   const article = document.createElement("article");
   article.className = "event-card";
 
-  const name = event.name;
+  const title = document.createElement("h3");
+  title.className = "event-card__title";
+  title.textContent = event.name;
 
-  // DATE
+  const formattedDate = event.date
-  const rawDate = event.dates?.start?.localDate;
+    ? new Date(event.date).toLocaleDateString("de-CH", {
-  const formattedDate = rawDate
-    ? new Date(rawDate).toLocaleDateString("de-CH", {
         day: "2-digit",
         month: "2-digit",
         year: "numeric"
       })
     : "Date not available";
 
-  // TIME
+  const formattedTime = event.time
-  const rawTime = event.dates?.start?.localTime;
+    ? event.time.slice(0, 5)
-  const formattedTime = rawTime
-    ? rawTime.slice(0, 5)
     : "";
 
-  // Combine date + time
   const dateTime = formattedTime
     ? `${formattedDate}, ${formattedTime}`
     : formattedDate;
 
-  const venue = event._embedded?.venues[0]?.name || "Unknown venue";
+  const date = document.createElement("p");
+  date.className = "event-card__date";
+  date.textContent = dateTime;
 
-  article.innerHTML = `
+  const venue = document.createElement("p");
-    <h3 class="event-card__title">${name}</h3>
+  venue.className = "event-card__venue";
-    <p class="event-card__date">${dateTime}</p>
+  venue.textContent = event.venue;
-    <p class="event-card__venue">${venue}</p>
+
-  `;
+  article.append(title, date, venue);
 
   return article;
 }

js/utils/helpers.js

@@ -1,3 +0,0 @@
-export function formatDate(date) {
-    return new Date(date).toLocaleDateString();
-  }