//Assign local storage to an array
                            let events = JSON.parse(localStorage.getItem("eventArray")) || eventArray;
                            filteredEvents = events;

                            displayAllData(events);

                            //Filter events by city
                            function getEvents(element) {
                                let city = element.getAttribute("data-string");
                                filteredEvents = events;
                                document.getElementById("statsHeader").innerHTML = `Stats for ${city} Events`;
                                if (city != 'All') {
                                    filteredEvents = events.filter(function (item) {
                                        if (item.city == city) {
                                            return item;
                                        }
                                    })
                                }
                                displayStat();
                            }

                            //Display all stats or by city
                            function displayStat() {

                                let total = 0;
                                let average = 0;
                                let most = 0;
                                let least = -1;
                                let currentAttendance = 0;
                                //get the current attendance for internal porpuses
                                for (let i = 0; i < filteredEvents.length; i++) {
                                    currentAttendance=filteredEvents[i].attendance; 
                                    total +=currentAttendance; 
                                    //set most attended 
                                    if (most < currentAttendance) { 
                                        most=currentAttendance; 
                                    } 
                                    //set least attended
                                    if (least> currentAttendance || least < 0) { 
                                        least=currentAttendance; 
                                    } 
                                }
                                //set average attended by dividing total and the number of events
                                average = total / filteredEvents.length;

                                //converts to integer
                                average = Math.floor(average);

                                //print each value
                                document.getElementById("total").innerHTML = total.toLocaleString();
                                document.getElementById("most").innerHTML = most.toLocaleString();
                                document.getElementById("least").innerHTML = least.toLocaleString();
                                document.getElementById("average").innerHTML = average.toLocaleString();
                            }

                            function displayData(events) {
                                const template = document.getElementById("eventData-template");
                                const eventBody = document.getElementById("results");
                                //Clear table first
                                eventBody.innerHTML = "";
                                //grab the events from local storage
                                let curEvents = JSON.parse(localStorage.getItem("eventArray"));

                                if (curEvents == null) {
                                curEvents = events;
                                }
                                for (let i = 0; i < curEvents.length; i++) { 
                                    const eventRow = document.importNode(template.content, true); 
                                    //grab only the columns in the template 
                                    let eventCols = eventRow.querySelectorAll("td");

                                    eventCols[0].textContent = curEvents[i].event;
                                    eventCols[1].textContent = curEvents[i].city;
                                    eventCols[2].textContent = curEvents[i].state;
                                    eventCols[3].textContent = curEvents[i].attendance; 
                                    eventCols[4].textContent = new Date(curEvents[i].date).toLocaleDateString(); 
                                    eventBody.appendChild(eventRow); 
                                } 
                            }

                            function addData() {
                                //get events from local storage
                                let curEvents = JSON.parse(localStorage.getItem("eventArray"));

                                let dismissBtn = document.getElementById("dismmisBtn");

                                if (curEvents == null) {
                                curEvents = events;
                                }
                                
                                let objEvent = {};
                                //Assign the value of every field to a property in the array
                                objEvent["event"] = document.getElementById("addEventName").value;
                                objEvent["city"] = document.getElementById("addEventCity").value;
                                objEvent["state"] = document.getElementById("addEventState").value;
                                objEvent["attendance"] = parseInt(document.getElementById("addEventAttendance").value, 10);
                                let eventDate = document.getElementById("addEventDate").value;
                                let eventDate2 = `${eventDate} 00:00`
                                objEvent["date"] = new Date(eventDate2).toLocaleDateString();
                                //Validates that each field is entered
                                if (objEvent["event"] == "" || objEvent["city"] == "" || objEvent["state"] == "" ||
                                    objEvent["attendance"] == 0 || objEvent["date"] == "Invalid Date") {
                                        Swal.fire({
                                            icon: 'error',
                                            title: 'Invalid',
                                            text: 'All fields must be entered!',
                                        })
                                        return;
                                } else {
                                    //Add current object to the array then to local storage
                                    curEvents.push(objEvent);
                                    localStorage.setItem("eventArray", JSON.stringify(curEvents));
                                    events = JSON.parse(localStorage.getItem("eventArray"));
                                    displayStat(events);
                                    displayData(events);
                                    window.location.reload();
                                }
                                formClear();
                                dismissBtn.click();
                            }
                            function dropDown() {
                                //Drop down menu option
                                let curEvents = JSON.parse(localStorage.getItem("eventArray"));
                                if (curEvents == null) {
                                    curEvents = events;
                                }
                                let eventDD = document.getElementById("eventDropDown");
                                //distinct events for the events array
                                let distinctEvents = [...new Set(curEvents.map(event => event.city))]
                                let linkHTMLEnd = '
All';
                                let resultHTML = "";
                                for (let i = 0; i < distinctEvents.length; i++) { 
                                    resultHTML +=`${distinctEvents[i]}`;
                                }
                                resultHTML += linkHTMLEnd;
                                eventDD.innerHTML = resultHTML;
                            }

                            function displayAllData() {
            
                                displayStat(events);
                                displayData(events);
                            }

                            function resetData() {
                                localStorage.clear();
                                window.location.reload();
                            }

                            function formClear() {
                                let theForm = document.getElementById("modalForm");
                                theForm.reset();
                            }