The Code

function buildDropdown() {
        // get the dropdown menu from the page
        let dropdownMenu = document.getElementById('eventDropdown');
        // empty the innerHTML to ensure its 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)]

        // get the template from the page
        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(dropdownTemplateNode);

        for (let index = 0; index < distinctCities.length; index++) {
            let cityMenuItem = document.importNode(template.content, true);
            let cityButton = cityMenuItem.querySelector('a');

            cityButton.textContent = distinctCities[index];
            cityButton.setAttribute('data-string', distinctCities[index]);

            dropdownMenu.appendChild(cityMenuItem);

        }
        displayStats(currEvents);

        displayEventData(currEvents);

    }

    function displayStats(eventsArray) {
        // let totalAttendance = calculateTotal(eventsArray);
        // let averageAttendance = calculateAverage(eventsArray);
        // let mostAttendance = calculateMost(eventsArray);
        // let leastAttendance = calculateMin(eventsArray);

        let stats = calculateStats(eventsArray);

        document.getElementById('total').textContent = stats.totalAttendance.toLocaleString("en-US", { maximumFractionDigits: 0, minimumFractionDigits: 0, });
        document.getElementById('average').textContent = stats.averageAttendance.toLocaleString("en-US", { maximumFractionDigits: 0, minimumFractionDigits: 0, });
        document.getElementById('most').textContent = stats.mostAttendance.toLocaleString("en-US", { maximumFractionDigits: 0, minimumFractionDigits: 0, });
        document.getElementById('least').textContent = stats.leastAttendance.toLocaleString("en-US", { maximumFractionDigits: 0, minimumFractionDigits: 0, });
    }

    function calculateStats(eventsArray) {

        let sum = 0;
        let aver = 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;
            }
        }

        aver = sum / eventsArray.length;

        let stats = {
            totalAttendance: sum,
            averageAttendance: aver,
            mostAttendance: max,
            leastAttendance: min,
        }
        return stats;
    }

    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;
            tableCells[4].textContent = currentEvent.date;

            tableBody.appendChild(eventRow);
        }
    }

    function getEventData() {
        let currentEvents = JSON.parse(localStorage.getItem('herdmateEventData'));

        if (currentEvents == null) {
            currentEvents = events;
            localStorage.setItem('herdmateEventData', 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 = {
            attendance: eventAttendance,
            event: eventName,
            date: eventDate,
            state: state,
            city: cityName,
        };

        let currentEvents = getEventData();
        currentEvents.push(newEvent);

        localStorage.setItem('herdmateEventData', JSON.stringify(currentEvents));

        buildDropdown();
        document.getElementById('statsHeader').textContent = 'All';
        document.getElementById('newEventForm').reset();
    }
JavaScript

The code is structured in seven functions.

buildDropdown()

This function builds the drop down menu using eventData and calls on other functions to display information on the page depending on what the user selects in the dropdown menu.

displayStats(eventsArray)

This function displays the event stats on the page, specifically the total, average, most and least. It also works to display these values as whole numbers rather than decimals.

calculateStats(eventsArray)

This function calculates the attendance. It calculates the total, average, most and least attendance depending on the data that is passed into the function. It then returns the calculated stats.

displayEventData(eventsArray)

This function displays the event data in a table using a template provided in the html. Each different piece of data is passed into the table and displayed properly.

getEventData()

This function gets the event data that's being stored locally on the user's browser. It then returns the data as currentEvents.

getEvents(element)

This function takes the provided events and then filters them depending on filters set by the user.

saveEventData()

This function saves each piece of data locally so that the user may use it again in the future.