2026-03-15 12:14:35 +01:00
10 changed files with 204 additions and 0 deletions
--- a/css/components.css
+++ b/css/components.css
--- a/css/main.css
+++ b/css/main.css
@ -0,0 +1,14 @@
+.event-card {
+    border: 1px solid #ddd;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 8px;
+  }
+  
+  .event-card__title {
+    font-size: 1.2rem;
+  }
+  
+  .event-card__date {
+    color: gray;
+  }
--- a/index.html
+++ b/index.html
@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>Encore – Discover Events</title>
+
+  <!-- CSS -->
+  <link rel="stylesheet" href="css/main.css">
+
+  <!-- Bootstrap (optional CSS framework) -->
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+    rel="stylesheet">
+</head>
+
+<body>
+
+  <!-- HEADER -->
+  <header class="site-header">
+    <nav class="container d-flex justify-content-between align-items-center">
+
+      <h1 class="site-logo">Encore</h1>
+
+      <ul class="nav">
+        <li class="nav-item">
+          <a class="nav-link" href="index.html">Home</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link" href="#">Events</a>
+        </li>
+
+      </ul>
+
+    </nav>
+  </header>
+
+
+  <!-- MAIN CONTENT -->
+  <main class="container mt-4">
+
+    <!-- SEARCH / FILTER SECTION -->
+    <section class="event-search mb-4">
+
+      <h2>Find Events</h2>
+
+      <div class="d-flex gap-2">
+
+        <input
+          id="city-input"
+          type="text"
+          class="form-control"
+          placeholder="Enter city (e.g. Zurich)"
+        >
+
+        <button
+          id="load-events"
+          class="btn btn-primary"
+        >
+          Search
+        </button>
+
+      </div>
+
+    </section>
+
+
+    <!-- EVENTS LIST -->
+    <section class="events">
+
+      <h2>Upcoming Events</h2>
+
+      <div id="event-list" class="events__list">
+        <p class="text-muted">Search for events to begin.</p>
+      </div>
+
+    </section>
+
+  </main>
+
+
+  <!-- FOOTER -->
+  <footer class="site-footer text-center mt-5 p-3">
+
+    <p>© 2026 Encore – Event Discovery</p>
+
+  </footer>
+
+
+  <!-- JS -->
+  <script type="module" src="js/app.js"></script>
+
+</body>
+
+</html>
--- a/js/api/ticketmaster.js
+++ b/js/api/ticketmaster.js
@ -0,0 +1,21 @@
+const API_KEY = "0FLYFe9BnzGlk2OPHrWleCulNzHpWgtC";
+
+export async function fetchEvents(city) {
+  const url = `https://app.ticketmaster.com/discovery/v2/events.json?apikey=${API_KEY}&city=${city}`;
+
+  try {
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      throw new Error("API request failed");
+    }
+
+    const data = await response.json();
+
+    return data._embedded?.events || [];
+
+  } catch (error) {
+    console.error("Error fetching events:", error);
+    return [];
+  }
+}
--- a/js/app.js
+++ b/js/app.js
@ -0,0 +1,39 @@
+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", async () => {
+
+  const city = cityInput.value.trim();
+
+  if (!city) {
+    container.innerHTML = "Please enter a city.";
+    return;
+  }
+
+  container.innerHTML = "Loading events...";
+
+  const events = await fetchEvents(city);
+
+  container.innerHTML = "";
+
+  if (events.length === 0) {
+    container.innerHTML = "No events found.";
+    return;
+  }
+
+  events.forEach(event => {
+    const card = createEventCard(event);
+    container.appendChild(card);
+  });
+
+});
+
+cityInput.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    button.click();
+  }
+});
--- a/js/services/eventService.js
+++ b/js/services/eventService.js
@ -0,0 +1,12 @@
+import { fetchEvents } from "../api/ticketmaster.js";
+
+export async function getEvents(city) {
+  const events = await fetchEvents(city);
+
+  return events.map(event => ({
+    id: event.id,
+    name: event.name,
+    date: event.dates.start.localDate,
+    venue: event._embedded?.venues[0]?.name
+  }));
+}
--- a/js/ui/eventCard.js
+++ b/js/ui/eventCard.js
@ -0,0 +1,17 @@
+export function createEventCard(event) {
+
+    const article = document.createElement("article");
+    article.className = "event-card";
+  
+    const name = event.name;
+    const date = event.dates.start.localDate;
+    const venue = event._embedded?.venues[0]?.name;
+  
+    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;
+  }
--- a/js/ui/eventList.js
+++ b/js/ui/eventList.js
--- a/js/ui/filters.js
+++ b/js/ui/filters.js
--- a/js/utils/helpers.js
+++ b/js/utils/helpers.js
@ -0,0 +1,3 @@
+export function formatDate(date) {
+    return new Date(date).toLocaleDateString();
+  }