css/main.css

@@ -89,18 +89,14 @@ footer {
 
   .search__controls {
     flex-direction: row;
-    align-items: center;
   }
 
-  .search__controls input,
-  .search__controls select {
+  .search__controls input {
     flex: 1;
-    min-width: 120px;
   }
 
   .search__controls button {
-    flex: 0 0 auto;
-    min-width: 120px;
+    width: 150px;
   }
 
   #event-list {

index.html

@@ -42,13 +42,12 @@
   <main class="container mt-4">
 
     <!-- SEARCH / FILTER SECTION -->
-    <section class="search mb-4">
+    <section class="event-search mb-4">
 
       <h2>Find Events</h2>
 
       <div class="search__controls">
 
-        <!-- City -->
         <input
           id="city-input"
           type="text"
@@ -56,22 +55,6 @@
           placeholder="Enter city (e.g. Zurich)"
         >
 
-        <!-- Date -->
-        <label for="date-from">From</label>
-        <input id="date-from" type="date">
-
-        <label for="date-to">To</label>
-        <input id="date-to" type="date">
-
-        <!-- Category -->
-        <select id="category-input" class="form-control">
-          <option value="">All categories</option>
-          <option value="music">Music</option>
-          <option value="sports">Sports</option>
-          <option value="arts & theatre">Arts & Theatre</option>
-        </select>
-
-        <!-- Button -->
         <button
           id="load-events"
           class="btn btn-primary"

js/app.js

@@ -1,46 +1,39 @@
-import { getEvents } from "./services/eventService.js";
-import { renderEventList } from "./ui/eventList.js";
-import { getFilters } from "./ui/filters.js";
+import { fetchEvents } from "./api/ticketmaster.js";
+import { createEventCard } from "./ui/eventCard.js";
 
 const button = document.querySelector("#load-events");
 const container = document.querySelector("#event-list");
 const cityInput = document.querySelector("#city-input");
 
-button.addEventListener("click", handleSearch);
+button.addEventListener("click", async () => {
 
-cityInput.addEventListener("keydown", (event) => {
-  if (event.key === "Enter") handleSearch();
-});
-
-async function handleSearch() {
-
-  const { city, dateFrom, dateTo, category } = getFilters();
+  const city = cityInput.value.trim();
 
   if (!city) {
-    container.innerHTML = "<p class='text-danger'>Please enter a city.</p>";
+    container.innerHTML = "Please enter a city.";
     return;
   }
 
-  container.innerHTML = "<p class='text-muted'>Loading events...</p>";
+  container.innerHTML = "Loading events...";
 
-  const events = await getEvents(city);
+  const events = await fetchEvents(city);
 
-  const filteredEvents = applyFilters(events, dateFrom, dateTo, category);
+  container.innerHTML = "";
 
-  renderEventList(filteredEvents, container);
-}
+  if (events.length === 0) {
+    container.innerHTML = "No events found.";
+    return;
+  }
 
-function applyFilters(events, dateFrom, dateTo, category) {
-
-  return events.filter(event => {
-
-    const matchDateFrom = dateFrom ? event.date >= dateFrom : true;
-    const matchDateTo = dateTo ? event.date <= dateTo : true;
-
-    const matchCategory = category
-      ? event.category && event.category.includes(category)
-      : true;
-
-    return matchDateFrom && matchDateTo && matchCategory;
+  events.forEach(event => {
+    const card = createEventCard(event);
+    container.appendChild(card);
   });
-}
+
+});
+
+cityInput.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    button.click();
+  }
+});

js/services/eventService.js

@@ -6,11 +6,7 @@ export async function getEvents(city) {
   return events.map(event => ({
     id: event.id,
     name: event.name,
-    date: event.dates?.start?.localDate || null,
-    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
+    date: event.dates.start.localDate,
+    venue: event._embedded?.venues[0]?.name
   }));
 }

js/ui/eventCard.js

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

js/ui/eventList.js

@@ -1,17 +0,0 @@
-import { createEventCard } from "./eventCard.js";
-
-export function renderEventList(events, container) {
-
-  container.innerHTML = "";
-
-  if (events.length === 0) {
-    container.innerHTML = "No events found.";
-    return;
-  }
-
-  events.forEach(event => {
-    const card = createEventCard(event);
-    container.appendChild(card);
-  });
-
-}

js/ui/filters.js

@@ -1,8 +0,0 @@
-export function getFilters() {
-    const city = document.querySelector("#city-input").value.trim();
-    const dateFrom = document.querySelector("#date-from").value;
-    const dateTo = document.querySelector("#date-to").value;
-    const category = document.querySelector("#category-input").value;
-  
-    return { city, dateFrom, dateTo, category };
-  }

js/utils/helpers.js

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