See The Code

Builds a dynamic dropdown whenever a new City is added

function buildDropDown(){
let eventDD = document.getElementById("eventDropDown");
let allEvents = JSON.parse(localStorage.getItem("events")) || events;
let distinctEvents = [...new Set(allEvents.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(events);
  }
        

Display The Stats of All the cities and events.

function displayStats(filteredEvents) {
let total = 0;
let average = 0;
let most = 0;
let least = -1;
let currentAttendance = 0;

for(let i = 0; i < filteredEvents.length; i++){ currentAttendance=parseInt(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, } ); }