The Code
                           
const events = [{
        id: 1,
        event: "ComicCon",
        city: "New York",
        state: "New York",
        attendance: 240000,
        date: "06/01/2017",
    }

    ,
    {
        id: 2,
        event: "ComicCon",
        city: "New York",
        state: "New York",
        attendance: 250000,
        date: "06/01/2018",
    }

    ,
    {
        id: 3,
        event: "ComicCon",
        city: "New York",
        state: "New York",
        attendance: 257000,
        date: "06/01/2019",
    }

    ,
    {
        id: 4,
        event: "ComicCon",
        city: "San Diego",
        state: "California",
        attendance: 130000,
        date: "06/01/2017",
    }

    ,
    {
        id: 5,
        event: "ComicCon",
        city: "San Diego",
        state: "California",
        attendance: 140000,
        date: "06/01/2018",
    }

    ,
    {
        id: 6,
        event: "ComicCon",
        city: "San Diego",
        state: "California",
        attendance: 150000,
        date: "06/01/2019",
    }

    ,
    {
        id: 7,
        event: "HeroesCon",
        city: "Charlotte",
        state: "North Carolina",
        attendance: 40000,
        date: "06/01/2017",
    }

    ,
    {
        id: 8,
        event: "HeroesCon",
        city: "Charlotte",
        state: "North Carolina",
        attendance: 45000,
        date: "06/01/2018",
    }

    ,
    {
        id: 9,
        event: "HeroesCon",
        city: "Charlotte",
        state: "North Carolina",
        attendance: 50000,
        date: "06/01/2019",
    }

    ,
];

//builds a list of distinct cities for our dropdown menu
function buildDropDown() {
    //interview question, how do you find
    //grabs the event drop down from the HTMl of citties we want to add to the dropdown
    let eventDD = document.getElementById("eventDropDown");
    eventDD.innerHTML = "";

    //load our links from a template.
    let ddTemplate = document.getElementById("cityDD-template");

    let curEvents = JSON.parse(localStorage.getItem("eventsArray")) || events;



    //this is the interview question, get a distinct list of cities by filtering the array
    let cities = curEvents.map((e) => e.city);
    //return a list of distinct cities

    let distinctCities = [...new Set(cities)];

    //use the drop down template
    //a tag within a tag in html is called a node, so by pulling it back it will be an html element
    let ddItemTemplate = document.importNode(ddTemplate.content, true);
    let li = ddItemTemplate.querySelector("li");
    let ddItem = ddItemTemplate.querySelector("a");
    ddItem.setAttribute("data-city", "ALL");
    ddItem.innerText = "ALL";
    eventDD.appendChild(li);

    for (let index = 0; index < distinctCities.length; index++) {
        let ddItemTemplate = document.importNode(ddTemplate.content, true);
        li = ddItemTemplate.querySelector("li");
        let ddItem = li.querySelector("a");
        ddItem.setAttribute("data-city", distinctCities[index]);
        ddItem.textContent = distinctCities[index];
        eventDD.appendChild(li);

    }

    //first you get the template from document. 2. import node 
    //display the stats
    displayStats(curEvents);
    displayData();
}

function displayStats(filteredEvents) {

    let total = 0;
    let average = 0;
    let most = 0;
    let least = -1;
    let currentAttendance = 0;


    for (let index = 0; index < filteredEvents.length; index++) {
        // gives me current attendance number
        currentAttendance = filteredEvents[index].attendance;
        total += currentAttendance;
        //24000 250000 257000
        if (most < currentAttendance) {
            most = currentAttendance;
        }

        if (least > currentAttendance || least < 0) {
            least = currentAttendance;
            //alternative method:
            //if (least == -1 || least > currentAttendance)
            //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("en-US", {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }

    );

}

//shows events for specific location i.e. NY SanDiego etc etc
// the user selected city and this fires off. 
function getEvents(element) {

    let city = element.getAttribute("data-city");
    curEvents = JSON.parse(localStorage.getItem("eventsArray")) || events;

    //filter the events base on the selected city
    //this is an interview question: given an array can you reduce the number of elements you want to do?
    //answer:
    let filteredEvents = curEvents;

    if (city != "ALL") {
        filteredEvents = curEvents.filter(function (event) {
                if (event.city == city) {
                    return event;
                }
            }

        )
    }

    document.getElementById("statsHeader").innerHTML = `Stats For ${city} Events`;

    //display
    displayStats(filteredEvents);

}

//display all the events on the page
function displayData() {
    let template = document.getElementById("eventData-template");
    let eventBody = document.getElementById("eventBody");
    // clear the table first
    eventBody.innerHTML = "";


    let curEvents = JSON.parse(localStorage.getItem("eventsArray")) || [];

    if (curEvents.length == 0) {
        curEvents = events;
        localStorage.setItem("eventsArray", JSON.stringify(curEvents));
    }

    for (let index = 0; index < curEvents.length; index++) {
        let eventRow = document.importNode(template.content, true);
        let eventCols = eventRow.querySelectorAll("td");

        eventCols[0].textContent = curEvents[index].event;
        eventCols[1].textContent = curEvents[index].city;
        eventCols[2].textContent = curEvents[index].state;
        eventCols[3].textContent = curEvents[index].attendance;
        eventCols[4].textContent = curEvents[index] = new Date(curEvents[index].date).toLocaleDateString();

        eventBody.appendChild(eventRow);

    }

}

function saveData() {
    let curEvents = JSON.parse(localStorage.getItem("eventsArray")) || events;

    let obj = {};

    obj["event"] = document.getElementById("newEventName").value;
    obj["city"] = document.getElementById("newEventCity").value;
    let stateSel = document.getElementById("newEventState");
    obj["state"] = stateSel.options[stateSel.selectedIndex].text;
    obj["attendance"] = parseInt(document.getElementById("newEventAttendance").value, 10);
    let eventDate = document.getElementById("newEventDate").value;

    let eventDate2 = `$ {
        eventDate
    }

    00:00`;
    obj["date"] = new Date(eventDate2).toLocaleString();

    curEvents.push(obj);

    localStorage.setItem("eventsArray", JSON.stringify(curEvents));

    buildDropDown();
    displayData();

}
                           
                       

Using HTML and Javascript this app allows the user to input information into a modal. This saves to local storage and is pushed to the display, placing it in numerical . These inputs are then pushed through multiple equations and displayed for further information.