</> Code Review

The application has three major code functions: (1) Event Statistics (by City); (2) Event Data; (3) Adding Events.

Click the section links below to learn more about the code.

Build Drop Down

The statistics section of the application initially leverages seed data, which is an array of objects. This data is stored in local storage at the initial load.

Line 4 Sets the curEvents variable to the locally stored array (or the base event array)

Line 6 Using Set the data is traversed with map to create a unique list of cities for the drop-down. 

// Build drop-down for filtering statistics by city
function buildDropDown() {
  var eventDD = document.getElementById('eventDropDown');
  let curEvents = JSON.parse(localStorage.getItem('eventArray')) || eventArray;

  let distinctEvents = [...new Set(curEvents.map((event) => event.city))];
  let linkHTMLEnd =
    '
All';
  let resultsHTML = '';

  for (let i = 0; i < distinctEvents.length; i++) {
    resultsHTML += `${distinctEvents[i]}`;
  }

  resultsHTML += linkHTMLEnd;
  eventDD.innerHTML = resultsHTML;
  displayStats();
}
Get Events

Description here

Line 8 Using the array method "filter" a copy is made of the base data for the purpose of creating statistics for the selected city. 

// Get the events for the selected city
function getEvents(e) {
  let city = e.getAttribute('data-string');
  let curEvents = JSON.parse(localStorage.getItem('eventArray')) || eventArray;
  filteredEvents = curEvents;
  document.getElementById('statsHeader').innerHTML = `Stats for ${city} Events`;

  if (city !== 'All') {
    filteredEvents = curEvents.filter(function (event) {
      if (event.city == city) {
        return event;
      }
    });
  }
  displayStats();
}
Display Stats

The filtered data is used to create event statistics that are then inserted into the HTML. 

// Display statistics based on city selection
function displayStats() {
  let total = 0;
  let average = 0;
  let most = 0;
  let least = -1;
  let currentAttendance = 0;

  for (let i = 0; i < filteredEvents.length; i++) {
    currentAttendance = filteredEvents[i].attendance;
    total += currentAttendance;

    if (most < currentAttendance) {
      most = currentAttendance;
    }

    if (least > currentAttendance || least < 0) {
      least = currentAttendance;
    }
  }

  average = total / filteredEvents.length;

  document.getElementById('total').innerHTML = total.toLocaleString();
  document.getElementById('most').innerHTML = most.toLocaleString();
  document.getElementById('least').innerHTML = least.toLocaleString();
  document.getElementById('average').innerHTML = average.toLocaleString(
    undefined,
    {
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }
  );
}

Get Data

Similar to Event Statistics, data is pulled from local storage (or the base array).

Display Data

Templates are used to pull the data and dynamically populate the HTML. This technique is particularly powerful as it keeps the HTML out of the Javascript.

Lines 3 and 4 Identifies the template and the code destination.

Line 9 In the for loop a copy of the template is populated with data then appended to the target destination. 

// Display event data
function displayData(events) {
  const myTemplate = document.getElementById('Data-Template');
  const resultsBody = document.getElementById('resultsBody');

  // clear table first
  resultsBody.innerHTML = '';

  for (let i = 0; i < events.length; i++) {
    const dataRow = document.importNode(myTemplate.content, true);

    dataRow.getElementById('event').textContent = events[i].event;
    dataRow.getElementById('city').textContent = events[i].city;
    dataRow.getElementById('state').textContent = events[i].state;
    dataRow.getElementById('attendance').textContent = events[
      i
    ].attendance.toLocaleString();
    dataRow.getElementById('date').textContent = events[i].date;

    resultsBody.appendChild(dataRow);
  }
}

Save Data

Using a modal, the user-provided data is captured, formatted and appended to the existing array as an object.

Lines 4 References the stored data from local storage (or the base data).

Line 6 - 15 Populates the object from the modal and pushes to array, which is then saved to local storage.. 

// Save user-provided data
function saveEvent() {
  // grab the events out of local storage
  let events = JSON.parse(localStorage.getItem('eventArray')) || eventArray;

  let obj = {};
  obj['event'] = document.getElementById('newEvent').value;
  obj['city'] = document.getElementById('newCity').value;
  obj['state'] = document.getElementById('newState').value;
  obj['attendance'] = +document.getElementById('newAttendance').value;
  obj['date'] = formatDate(document.getElementById('newDate').value);

  events.push(obj);

  localStorage.setItem('eventArray', JSON.stringify(events));

  document.forms[0].reset();
  buildDropDown();
  displayData(events);
}