The Code

                        
                            var events = [{
                                event: "ComicCon",
                                city: "New York",
                                state: "New York",
                                attendance: 240000,
                                date: "06/01/2017",
                              },
                              {
                                event: "ComicCon",
                                city: "New York",
                                state: "New York",
                                attendance: 250000,
                                date: "06/01/2018",
                              },
                              {
                                event: "ComicCon",
                                city: "New York",
                                state: "New York",
                                attendance: 257000,
                                date: "06/01/2019",
                              },
                              {
                                event: "ComicCon",
                                city: "San Diego",
                                state: "California",
                                attendance: 130000,
                                date: "06/01/2017",
                              },
                              {
                                event: "ComicCon",
                                city: "San Diego",
                                state: "California",
                                attendance: 140000,
                                date: "06/01/2018",
                              },
                              {
                                event: "ComicCon",
                                city: "San Diego",
                                state: "California",
                                attendance: 150000,
                                date: "06/01/2019",
                              },
                              {
                                event: "HeroesCon",
                                city: "Charlotte",
                                state: "North Carolina",
                                attendance: 40000,
                                date: "06/01/2017",
                              },
                              {
                                event: "HeroesCon",
                                city: "Charlotte",
                                state: "North Carolina",
                                attendance: 45000,
                                date: "06/01/2018",
                              },
                              {
                                event: "HeroesCon",
                                city: "Charlotte",
                                state: "North Carolina",
                                attendance: 50000,
                                date: "06/01/2019",
                              },
                            ]
                            
                            function buildDropDown() {
                                // get the dropdown menu from the page
                                let dropdownMenu = document.getElementById('eventDropDown');
                                // empty the innerHTML to ensure it is clean
                                dropdownMenu.innerHTML = '';
                            
                                // get our events
                                let currEvents = getEventData();
                            
                                // pull out JUST the city names
                                let eventCities = currEvents.map( (event) => event.city );
                                // filter the cities to only DISTINCT city names
                                let distinctCities = [...new Set(eventCities)];
                            
                                // grabbing the template from the HTML file
                                const template = document.getElementById('dropdownItemTemplate');
                            
                            
                                // copy the template
                                let dropdownTemplateNode = document.importNode(template.content, true);
                                // get the  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(menuItem);
                            
                                for(let i = 0; i < distinctCities.length; i++){
                                    let cityMenuItem = document.importNode(template.content, true);
                                    let cityButton = cityMenuItem.querySelector('a');
                            
                                    cityButton.textContent = distinctCities[i];
                                    cityButton.setAttribute("data-string", distinctCities[i]);
                            
                                    dropdownMenu.appendChild(cityMenuItem);
                                }
                            
                                displayStats(currEvents);
                                displayEventsData(currEvents);
                            }
                            
                            function displayStats(eventsArray) {
                                let stats = calculateStats(eventsArray)
                            
                            
                                document.getElementById('total').textContent = stats.total.toLocaleString();
                                document.getElementById('average').textContent = stats.averageAttendance.toLocaleString("en-US", {maximumFractionDigits: 0, minimumFractionDigits: 0});
                                document.getElementById('most').textContent = stats.maximumAttendance.toLocaleString();
                                document.getElementById('least').textContent = stats.minimumAttendance.toLocaleString();
                            }
                            
                            function calculateStats(eventsArray) {
                            
                                let sum = 0;
                                let avg = 0; 
                                let max = eventsArray[0].attendance;
                                let min = eventsArray[0].attendance;
                            
                                for (let index = 0; index < eventsArray.length; index++) {
                                    let currentEvent = eventsArray[index];
                            
                                    sum = sum + currentEvent.attendance;
                            
                                    if (currentEvent.attendance > max) {
                                        max = currentEvent.attendance;
                                    }
                                    if (currentEvent.attendance < min) {
                                        min = currentEvent.attendance;
                                    }
                                }
                            
                                avg = sum / eventsArray.length;
                            
                                let stats = {
                                    total: sum,
                                    averageAttendance: avg,
                                    minimumAttendance: min,
                                    maximumAttendance: max
                                }
                            
                                return stats;
                            
                            }
                            
                            function displayEventsData(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;
                                    tableCells[4].textContent = currentEvent.date;
                            
                                    tableBody.appendChild(eventRow);
                                }
                            }
                            
                            function getEventData() {
                              let currentEvents = JSON.parse(localStorage.getItem('rp-eventData') );
                            
                              if (currentEvents == null) {
                                  currentEvents = events;
                                  localStorage.setItem('rp-eventData', 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);
                              displayEventsData(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 = {
                                attendance: eventAttendance,
                                event: eventName,
                                date: eventDate,
                                state: state,
                                city: cityName,
                              };
                            
                              let currentEvents = getEventData();
                              currentEvents.push(newEvent);
                            
                              localStorage.setItem("rp-eventData", JSON.stringify(currentEvents));
                            
                              // update the page
                              buildDropDown();
                              document.getElementById('statsHeader').textContent = 'All';
                              document.getElementById('newEventForm').requestFullscreen();
                            }