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
let dropDownMenu = document.getElementById('eventDropDown');
// reset the dropdown menu to empty
dropDownMenu.innerHTML = '';
// pull object from storage
let currentEvents = getEventData();
// pull out just city names
let eventCities = currentEvents.map((event) => event.city);
// filter the cities to only the DISTINCT city names
let distinctCities = [...new Set(eventCities)];
// get the template
const template = document.getElementById('dropdownItemTemplate');
// copy the child content from the node
let dropDownTemplateNode = document.importNode(template.content, true);
// grab the a tag from the template
let menuItem = dropDownTemplateNode.querySelector('a');
// change the inner text inside the a tag of the template
menuItem.innerHTML = 'All Cities';
// add an attribute to the a tag
menuItem.setAttribute('data-string', "All")
// append menuItem to dropdown menu
dropDownMenu.appendChild(menuItem);
for (let i = 0; i < distinctCities.length; i++) {
let cityMenuItem = document.importNode(template.content, true);
let cityBtn = cityMenuItem.querySelector('a');
cityBtn.innerHTML = distinctCities[i];
cityBtn.setAttribute("data-string", distinctCities[i]);
dropDownMenu.appendChild(cityMenuItem);
}
displayStats(currentEvents);
displayEventData(currentEvents)
}
function displayStats(eventsArr) {
let stats = calculateStats(eventsArr);
// quick maths
document.getElementById('total').innerHTML =
stats.totalAttendance.toLocaleString();
document.getElementById('average').innerHTML =
stats.averageAttendance.toLocaleString(
'en-US', {
maximumFractionDigits: 0,
minimumFractionDigits: 0
}
);
document.getElementById('most').innerHTML =
stats.maximumAttendance.toLocaleString();
document.getElementById('least').innerHTML =
stats.minimumAttendance.toLocaleString();
}
function calculateStats(eventsArr) {
let sum = 0;
let average = 0;
let max = eventsArr[0].attendance;
let min = eventsArr[0].attendance;
for (let i = 0; i < eventsArr.length; i++) {
let currentEvent = eventsArr[i];
sum += currentEvent.attendance;
if (max < currentEvent.attendance) {
max = currentEvent.attendance;
}
if (min > currentEvent.attendance) {
min = currentEvent.attendance;
}
}
average = sum / eventsArr.length;
let stats = {
totalAttendance: sum,
averageAttendance: average,
minimumAttendance: min,
maximumAttendance: max
}
return stats;
}
function displayEventData(eventsArr) {
let tableBody = document.getElementById('eventTableBody');
const tableRowTemplate =
document.getElementById('eventTableRowTemplate');
tableBody.innerHTML = '';
for (let i = 0; i < eventsArr.length; i++)
{
let currentEvent=eventsArr[i];
let eventRow = document.importNode(tableRowTemplate.content, true);
let tableCells = eventRow.querySelectorAll('td');
tableCells[0].innerHTML=currentEvent.event;
tableCells[1].innerHTML=currentEvent.city;
tableCells[2].innerHTML=currentEvent.state;
tableCells[3].innerHTML=currentEvent.attendance.toLocaleString();
tableCells[4].innerHTML=currentEvent.date;
tableBody.appendChild(eventRow);
}
}
function getEventData() {
let currentEvents =
JSON.parse(localStorage.getItem('soiree-eventData'));
if (currentEvents == null) {
currentEvents = events;
localStorage.setItem('soiree-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((event) => {
if (cityName == event.city) {
return event
}
});
}
document.getElementById('statsHeader').innerHTML = cityName;
displayStats(filteredEvents);
displayEventData(filteredEvents);
}
function saveEventData() {
let eventName = document.getElementById('newEventName').value;
let eventCity = 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 = {
event: eventName,
city: eventCity,
state: state,
attendance: eventAttendance,
date: eventDate,
};
let currentEvents = getEventData();
currentEvents.push(newEvent);
localStorage.setItem('soiree-eventData',
JSON.stringify(currentEvents));
// update the page
buildDropDown();
document.getElementById('statsHeader').innerHTML = 'All';
document.getElementById('newEventForm').reset();
}
The code is structured in seven functions
buildDropDown()
This function changes the options available in the dropdown menu based on the events that have been posted.
displayStats(eventsArr)
This function displays various stats based on previous events.
calculateStats(eventsArr)
This function is used to handle all the calculations done for stats.
displayEventData(eventsArr)
This function takes in an object and breaks it down and displays it on a table.
getEventData()
This function checks to see if there is data in localStorage. If data is there it will pull it out. If no data found, it will store what it currently has in localStorage.
getEvents(element)
This function takes the data passed in from localStorage and directs it to the appropriate functions for processing.
saveEventData()
This function takes in user provided info and stores it in localStorage as well as displays it on the page.