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

async function getAllEvents() {
  const allEvents = await fetch('discovery-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 #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');
  }
}

@@ -326,2779 +326,26 @@
 vent
-);%0A  %7D%0A%7D%0A%0A/** Writes out relevant details to an event card */%0Afunction populateEventContainer(event) %7B%0A  const indexOfEventCard = 25;%0A  $.get('event-card.html', function(eventCardTotal) %7B%0A    const eventCardId = %60event-$%7Bevent.eventId%7D%60;%0A    const eventCard = $(eventCardTotal).get(indexOfEventCard);%0A    $(eventCard).attr('id', eventCardId);%0A    $('#event-container').append(eventCard);%0A    $(%60#$%7BeventCardId%7D #event-card-title%60).html(event.name);%0A    $(%60#$%7BeventCardId%7D #event-card-description%60).html(event.description);%0A    $(%60#$%7BeventCardId%7D #event-card-date%60)%0A        .html(buildDate(event.date.year, event.date.month, event.date.dayOfMonth));%0A    $(%60#$%7BeventCardId%7D #event-card-time%60).html(event.time);%0A    $(%60#$%7BeventCardId%7D #event-card-location%60).html(event.location);%0A    $(%60#$%7BeventCardId%7D #event-card-volunteers%60)%0A        .html(buildVolunteers(event.opportunities));%0A    buildAsLabels(eventCardId, event.labels, 'interests');%0A    buildSkillsAsLabels(eventCardId, event.opportunities);%0A    addLinkToRegister(eventCardId);%0A    addLinkToDetails(eventCardId);%0A  %7D);%0A%7D%0A%0A/** Adds a hyperlink to the registration button of event card */%0Afunction addLinkToRegister(eventCardId) %7B%0A  const eventId = eventCardId.substring(6);%0A  $('#' + eventCardId + ' .btn-primary #event-register')%0A      .attr('href', %60/event-details.html?eventId=$%7BeventId%7D&register=true%60);%0A%7D%0A%0A/** Adds a hyperlink to the details button of event card */%0Afunction addLinkToDetails(eventCardId) %7B%0A  const eventId = eventCardId.substring(6);%0A  $('#' + eventCardId + ' .btn #event-details')%0A      .attr('href', %60/event-details.html?eventId=$%7BeventId%7D&register=false%60);%0A%7D%0A%0Afunction buildDate(year, month, dayOfMonth) %7B%0A  return month + '/' + dayOfMonth + '/' + year;%0A%7D%0A%0A/** Creates a properly-formatted volunteering opportunity string */%0Afunction buildVolunteers(opportunities) %7B%0A  let opportunityString = '';%0A  for (const opportunity of opportunities) %7B%0A    opportunityString += opportunity.name + ', ';%0A  %7D%0A  return opportunityString.slice(0, -2);%0A%7D%0A%0A/** Creates a button label for each provided interest or skill */%0Afunction buildAsLabels(eventCardId, labels, className) %7B%0A  for (const label of labels) %7B%0A    const newLabelButton = document.createElement('button');%0A    newLabelButton.classList.add(%60btn-$%7BclassName%7D%60);%0A    newLabelButton.classList.add('btn');%0A    newLabelButton.disabled = true;%0A    newLabelButton.innerHTML = label;%0A    document%0A        .querySelector(%60#$%7BeventCardId%7D #event-card-labels%60)%0A        .appendChild(newLabelButton);%0A  %7D%0A%7D%0A%0A/** Creates the corresponding skill button labels for each volunteering opportunity */%0Afunction buildSkillsAsLabels(eventId, opportunities) %7B%0A  for (const opportunity of opportunities) %7B%0A    buildAsLabels(eventId, opportunity.requiredSkills, 'skills
+, 'event-container
 ');%0A

Make new var for ID