Merge pull request #31 from jaiminiprajapati/upcoming-events-buttonf-…

…links Upcoming events buttonf links
jaiminiprajapati · Feb 11, 2024 · 8f55b59 · 8f55b59
2 parents 77ba876 + 9cb9a9a
commit 8f55b59
Showing 1 changed file with 14 additions and 22 deletions.
diff --git a/js/creators/upcomingEventCard.js b/js/creators/upcomingEventCard.js
@@ -1,47 +1,39 @@
 function createUpcomingEventCard(event) {
-  const id = event.eventId;
-  const title = event.info.title;
-  const buyThicketsURL = event.websiteUrl.buyThicketsUrl;
-  const findThicketsURL = event.websiteUrl.findThicketsUrl;
   const imgUrl = event.imagesUrls[0]; //TODO take first img if is not there take second if is not there generate random img
-  const altDescription = "TODO: alt text dynamically"; //? how to do dynamically img description
-  const footerText = event.info.description;
-  const city = event.location.city;
-  const state = event.location.state;
-  const address = event.location.address;
-  const postCode = event.location.postCode;
-  const dateTimeUTC = event.info.dateTimeUTC;
+
+  //? how to do dynamically img description
+  const altDescription = "poster of the event";
 
   // TODO add styles to the button
-  var card = `<div id="event-card-${id}" class="col">
+  var card = `<div id="event-card-${event.eventId}" class="col">
   <div class="card h-100">
-    <a href="${findThicketsURL}">
+    <a href="${event.websiteUrl.findTicketsUrl}" target="_blank">
       <img src="${imgUrl}" alt="${altDescription} class="card-img-top img-fluid upcoming-event-card-img"/>
     </a>
     <div class="card-body">
-      <h5 class="card-title">${title}</h5>
+      <h5 class="card-title">${event.info.title}</h5>
     </div>
     <div class="card-footer">
     <div class="footer-item">
-        <div class="footer-title">City: ${city}</div>
+        <div class="footer-title">City: ${event.location.city}</div>
       </div>
       <div class="footer-item">
-        <div class="footer-title">State: ${state}</div>
+        <div class="footer-title">State: ${event.location.state}</div>
       </div>
       <div class="footer-item">
-        <div class="footer-title">Address: ${address}</div>
+        <div class="footer-title">Address: ${event.location.address}</div>
       </div>
       <div class="footer-item">
-        <div class="footer-title">Post Code: ${postCode}</div>
+        <div class="footer-title">Post Code: ${event.location.postCode}</div>
       </div>
       <div class="footer-item">
-        <div class="footer-title">Date & Time: ${dateTimeUTC}</div>
+        <div class="footer-title">Date & Time: ${event.info.dateTimeUTC}</div>
       </div>
-      <small class="text-body-secondary">${footerText}</small>
-      <a href="${buyThicketsURL}" target="_blank">
+      <small class="text-body-secondary">${event.info.description}</small>
+      <a href="${event.websiteUrl.buyTicketsUrl}" target="_blank">
         <button>Tickets</button>
       </a>
-      <a href="${findThicketsURL}" target="_blank">
+      <a href="${event.websiteUrl.findTicketsUrl}" target="_blank">
         <button>Check time</button>
       </a>
       </div>