diff --git a/css/components.css b/css/components.css new file mode 100644 index 0000000..e69de29 diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..008ea5f --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..6e9633c --- /dev/null +++ b/index.html @@ -0,0 +1,98 @@ + + + + + + + + Encore – Discover Events + + + + + + + + + + + +
+ +
+ + + +
+ + +
+ +

Find Events

+ +
+ + + + + +
+ +
+ + + +
+ +

Upcoming Events

+ +
+

Search for events to begin.

+
+ +
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/js/api/ticketmaster.js b/js/api/ticketmaster.js new file mode 100644 index 0000000..edfea05 --- /dev/null +++ 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 []; + } +} \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..276c294 --- /dev/null +++ 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(); + } +}); \ No newline at end of file diff --git a/js/services/eventService.js b/js/services/eventService.js new file mode 100644 index 0000000..67404d1 --- /dev/null +++ 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 + })); +} \ No newline at end of file diff --git a/js/ui/eventCard.js b/js/ui/eventCard.js new file mode 100644 index 0000000..13e3f99 --- /dev/null +++ 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 = ` +

${name}

+

${date}

+

${venue}

+ `; + + return article; + } \ No newline at end of file diff --git a/js/ui/eventList.js b/js/ui/eventList.js new file mode 100644 index 0000000..e69de29 diff --git a/js/ui/filters.js b/js/ui/filters.js new file mode 100644 index 0000000..e69de29 diff --git a/js/utils/helpers.js b/js/utils/helpers.js new file mode 100644 index 0000000..855cea1 --- /dev/null +++ b/js/utils/helpers.js @@ -0,0 +1,3 @@ +export function formatDate(date) { + return new Date(date).toLocaleDateString(); + } \ No newline at end of file