The Code

      
        //Test Data
        var events = [{...}];
          function BuildDropDown() {
          //Get the dropdown menu from the page
          let dropdownMenu = document.getElementById('eventDropDown');
          //Empty the dropdown innerHTML to ensure theres nothing in it
          dropdownMenu.innerHTML = '';
          //Get our events
          let currEvents = GetEventData();
        
          //Pull out just the city names
          let eventCities = currEvents.map((event) => event.city);
          //Filter the cites to on distinct city names
          let distinctCities = [...new Set(eventCities)];
        
          //Get the template from the page
          const template = document.getElementById('dropdownItemTemplate');
        
          //Copy the template
          let dropdownTemplateNode = document.importNode(template.content, true);
          //Get the a tag from the template copy
          let menuItem = dropdownTemplateNode.querySelector('a');
          //change the text
          menuItem.textContent = 'All Cities';
          menuItem.setAttribute("data-string", "All");
          //Add item to the page
          dropdownMenu.appendChild(dropdownTemplateNode);
        
          for (let i = 0; i < distinctCities.length; i++) {
            let cityMenuItem = document.importNode(template.content, true);
            let cityBtn = cityMenuItem.querySelector('a')
        
            cityBtn.textContent = distinctCities[i];
            cityBtn.setAttribute("data-string", distinctCities[i]);
        
            dropdownMenu.appendChild(cityMenuItem);
        
          }
        
          DisplayStats(currEvents);
          DisplayEventData(currEvents);
        }
        
        function DisplayStats(eventsArray) {
          let calculatedValues = CalculateStats(eventsArray);
        
          document.getElementById('total').textContent = calculatedValues.total.toLocaleString();
          document.getElementById('average').textContent = calculatedValues.average.toLocaleString("en-US", { maximumFractionDigits: 0, minimumFractionDigits: 0 });
          document.getElementById('most').textContent = calculatedValues.most.toLocaleString();
          document.getElementById('least').textContent = calculatedValues.least.toLocaleString();
        }
        
        function CalculateStats(eventsArray) {
          let finalValues = {
            total: 0,
            average: 0,
            most: eventsArray[0].attendance,
            least: eventsArray[0].attendance
          }
        
          for (let i = 0; i < eventsArray.length; i++) {
            let currentEvent = eventsArray[i];
            //Calculate total and update the object
            finalValues.total += currentEvent.attendance;
            //test for most and update the object
            finalValues.most = finalValues.most < currentEvent.attendance ? currentEvent.attendance : finalValues.most;
            //test for least and update the object
            finalValues.least = finalValues.least > currentEvent.attendance ? currentEvent.attendance : finalValues.least;
          }
          //Calculate the average
          finalValues.average = finalValues.total / eventsArray.length;
        
          return finalValues;
        }
        
        function DisplayEventData(eventsArray) {
          let tableBody = document.getElementById('eventTableBody');
          const tableRowTemplate = document.getElementById('eventTableRowTemplate');
        
          tableBody.innerHTML = '';
        
          for (let i = 0; i < eventsArray.length; i++) {
              let eventRow = document.importNode(tableRowTemplate.content, true);
              let currentEvent = eventsArray[i];
        
              let tableCells = eventRow.querySelectorAll('td');
        
              tableCells[0].textContent = currentEvent.event;
              tableCells[1].textContent = currentEvent.city;
              tableCells[2].textContent = currentEvent.state;
              tableCells[3].textContent = currentEvent.attendance.toLocaleString();
              tableCells[4].textContent = currentEvent.date;
        
              tableBody.appendChild(eventRow);
          }
        }
        
        function GetEventData(){
          let currentEvents = JSON.parse(localStorage.getItem('eventnetEventData'));
        
          if(currentEvents == null){
            currentEvents = events;
            localStorage.setItem('eventnetEventData', JSON.stringify(currentEvents));
          }
        
          return currentEvents;
        }
        
        function GetEvents(element){
          let currentEvents = GetEventData();
          let cityName = element.getAttribute('data-string');
        
          let filteredEvents = currentEvents;
        
          if(cityName != 'All'){
             filteredEvents = currentEvents.filter(
              function(event){
                if(cityName == event.city){
                  return event;
                }}
            );
          }
        
          document.getElementById('statsHeader').textContent = cityName;
          DisplayStats(filteredEvents);
          DisplayEventData(filteredEvents);
        }
         
        function SaveEventData(){
          let eventName = document.getElementById('newEventName').value;
          let cityName = document.getElementById('newEventCity').value;
          let eventAttendance = parseInt(document.getElementById('newEventAttendance').value);
          let eventDate = document.getElementById('newEventDate').value;
          eventDate = `${eventDate} 00:00`;
          eventDate = new Date(eventDate).toLocaleDateString();
        
        
        
          let stateSelect = document.getElementById('newEventState')
          let  state = stateSelect.options[stateSelect.selectedIndex].text;
        
          let newEvent = {
            event: eventName,
            city: cityName,
            state: state,
            attendance: eventAttendance,
            date: eventDate,
          }
        
          let currentEvents = GetEventData();
          currentEvents.push(newEvent);
        
          localStorage.setItem("eventnetEventData",JSON.stringify(currentEvents));
        
          BuildDropDown();
          document.getElementById('statsHeader').textContent = 'All';
          document.getElementById('newEventForm').requestFullscreen();
        }
      
    

BuildDropDown()

To build our dropdown at the top of the page we iterate through all of our sample data, and pull each distinct city name out. Once we have our city list, we grab the dropdown button template from html and create a button for each one. Once we have finished building our dropdown we then call our display functions for the stats section and event data table.

CalculateStats()

To calculate the information for our stats area we pass in our array of event data. After intintializing an object to store all of our calculated information, we iterate through the event data an make the appropriate calculations for each value in the finalValues object. We then return the final values object to the DisplayStats() function.

DisplayStats()

To display the stats information at the top left we set the textcontent of each element to its corespinding value from the finalValues object we passed in

GetEventData()

To initialize the event data we first check if there is any current events data stored localy on the users machine. If there isnt, we initialze the events from our test data, stringify that with JSON and save it to local storage.

DisplayEventData()

To get the table information onto the page, we grab the tableBody and tableRowTemplate elements from html. We then clear the table to make sure there is not any data to show and iterate through our events array using the template to build each row, then appending that row to the bottom of our table body.

GetEvents()

This function lets us filter through our events and pull out each one based on the cityname data-string attribute.

SaveEventData()

Finally to wrap this up we include a save data funtion allowing the user to locally save any data that they have entered themselves.