$(async function() {
  const allEvents = await getAllEvents();
  populateAllEvents(allEvents);
});

async function getAllEvents() {
  const allEvents = await fetch('event-details');
  return allEvents.json();
}

function populateAllEvents(allEvents) {
  for (const event of allEvents) {
    populateEventContainer(event);
  }
}

/** Writes out relevant details to an event card */
function populateEventContainer(event) {
  const indexOfEventCard = 25;
  $.get('event-card.html', function(eventCardTotal) {
    const eventCardId = 'event-' + event.eventId;
    const eventCard = $(eventCardTotal).get(indexOfEventCard);
    $(eventCard).attr('id', eventCardId);
    $('#event-container').append(eventCard);
    $('#' + eventCardId + ' #event-card-title').html(event.name);
    $('#' + eventCardId + ' #event-card-description').html(event.description);
    $('#' + eventCardId + ' #event-card-date')
        .html(buildDate(event.date.year, event.date.month, event.date.dayOfMonth));
    $('#' + eventCardId + ' #event-card-time').html(event.time);
    $('#' + eventCardId + ' #event-card-location').html(event.location);
    $('#' + eventCardId + ' #event-card-volunteers')
        .html(buildVolunteers(event.opportunities));
    buildAsLabels(eventCardId, event.labels, 'interests');
    buildSkillsAsLabels(eventCardId, event.opportunities);
    addLinkToRegister(eventCardId);
    addLinkToDetails(eventCardId);
  });
}

/** Adds a hyperlink to the registration button of event card */
function addLinkToRegister(eventCardId) {
  const eventId = eventCardId.substring(6);
  $('#' + eventCardId + ' .btn-primary #event-register')
      .attr('href', `/event-details.html?eventId=${eventId}&register=true`);
}

/** Adds a hyperlink to the details button of event card */
function addLinkToDetails(eventCardId) {
  const eventId = eventCardId.substring(6);
  $('#' + eventCardId + ' .btn-primary #event-details')
      .attr('href', `/event-details.html?eventId=${eventId}&register=false`);
}

function buildDate(year, month, dayOfMonth) {
  return month + '/' + dayOfMonth + '/' + year;
}

/** Creates a properly-formatted volunteering opportunity string */
function buildVolunteers(opportunities) {
  let opportunityString = '';
  for (const opportunity of opportunities) {
    opportunityString += opportunity.name + ', ';
  }
  return opportunityString.slice(0, -2);
}

/** Creates a button label for each provided interest or skill */
function buildAsLabels(eventCardId, labels, className) {
  for (const label of labels) {
    const newLabelButton = document.createElement('button');
    newLabelButton.classList.add(`btn-{className}`);
    newLabelButton.classList.add('btn');
    newLabelButton.disabled = true;
    newLabelButton.innerHTML = label;
    document
        .querySelector('#' + eventCardId + ' #event-card-labels')
        .appendChild(newLabelButton);
  }
}

/** Creates the corresponding skill button labels for each volunteering opportunity */
function buildSkillsAsLabels(eventId, opportunities) {
  for (const opportunity of opportunities) {
    buildAsLabels(eventId, opportunity.requiredSkills, 'skills');
  }
}

@@ -158,16 +158,26 @@
  fetch('
+discovery-
 event-de
@@ -538,19 +538,17 @@
 d = 
-'
+%60
 event-
-' + 
+$%7B
 even
@@ -556,16 +556,18 @@
 .eventId
+%7D%60
 ;%0A    co
@@ -708,38 +708,36 @@
 entCard);%0A    $(
-'#' + 
+%60#$%7B
 eventCardId + ' 
@@ -723,36 +723,33 @@
 (%60#$%7BeventCardId
- + '
+%7D
  #event-card-tit
@@ -750,17 +750,17 @@
 rd-title
-'
+%60
 ).html(e
@@ -769,38 +769,36 @@
 nt.name);%0A    $(
-'#' + 
+%60#$%7B
 eventCardId + ' 
@@ -784,36 +784,33 @@
 (%60#$%7BeventCardId
- + '
+%7D
  #event-card-des
@@ -813,25 +813,25 @@
 -description
-'
+%60
 ).html(event
@@ -843,38 +843,36 @@
 ription);%0A    $(
-'#' + 
+%60#$%7B
 eventCardId + ' 
@@ -858,36 +858,33 @@
 (%60#$%7BeventCardId
- + '
+%7D
  #event-card-dat
@@ -884,17 +884,17 @@
 ard-date
-'
+%60
 )%0A      
@@ -969,38 +969,36 @@
 fMonth));%0A    $(
-'#' + 
+%60#$%7B
 eventCardId + ' 
@@ -984,36 +984,33 @@
 (%60#$%7BeventCardId
- + '
+%7D
  #event-card-tim
@@ -1010,17 +1010,17 @@
 ard-time
-'
+%60
 ).html(e
@@ -1029,38 +1029,36 @@
 nt.time);%0A    $(
-'#' + 
+%60#$%7B
 eventCardId + ' 
@@ -1044,36 +1044,33 @@
 (%60#$%7BeventCardId
- + '
+%7D
  #event-card-loc
@@ -1074,17 +1074,17 @@
 location
-'
+%60
 ).html(e
@@ -1101,30 +1101,28 @@
 ion);%0A    $(
-'#' + 
+%60#$%7B
 eventCardId 
@@ -1112,36 +1112,33 @@
 (%60#$%7BeventCardId
- + '
+%7D
  #event-card-vol
@@ -1144,17 +1144,17 @@
 lunteers
-'
+%60
 )%0A      
@@ -1857,32 +1857,24 @@
 dId + ' .btn
--primary
  #event-deta
@@ -2594,16 +2594,17 @@
 dd(%60btn-
+$
 %7BclassNa
@@ -2761,22 +2761,20 @@
 elector(
-'#' + 
+%60#$%7B
 eventCar
@@ -2776,20 +2776,17 @@
 ntCardId
- + '
+%7D
  #event-
@@ -2796,17 +2796,17 @@
 d-labels
-'
+%60
 )%0A      

Fix hyperlinks