The Code
const 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",
},
];
const getEvents = () => {
let storedEvents = JSON.parse(localStorage.getItem('ed-events') || '[]');
if (storedEvents.length == 0) {
storedEvents = events;
localStorage.setItem('ed-events', JSON.stringify(events));
}
return storedEvents;
}
const buildDropdown = () => {
// get current events
let currentEvents = getEvents();
// get a list of unique cities
let eventCities = currentEvents.map(e => e.city);
let distinctCities = new Set(eventCities); //eliminates duplicates and then returns the unique items
let dropdownChoices = ['All', ...distinctCities];
const dropdownDiv = document.getElementById('city-dropdown');
const dropdownItemTemplate = document.getElementById("dropdown-template");
dropdownDiv.innerHTML = '';
// with each unique city:
dropdownChoices.forEach(choice => {
// - copy the dropdown template
let dropdownItemCopy = dropdownItemTemplate.content.cloneNode(true);
// - change that copies text
let aTag = dropdownItemCopy.querySelector('a');
aTag.innerText = choice;
// - put in the dropdown
dropdownDiv.appendChild(dropdownItemCopy);
})
document.getElementById('stats-loc').textContent = 'All';
displayEvents(currentEvents);
displayStats(currentEvents);
}
const displayEvents = (events) => {
//find the table
const eventsTable = document.getElementById('events-table');
//find the table row template
const eventTemplate = document.getElementById('table-row-template');
//clear out the table
eventsTable.innerHTML = '';
//for each event:
for (let i = 0; i < events.length; i++) {
// -- get one event
let event = events[i];
// -- clone the template
let tableRow = eventTemplate.content.cloneNode(true);
// -- get each property of en event
// -- insert each property ino the cloned template
let eventNameCell = tableRow.querySelector('[data-id="event"]');
eventNameCell.innerText = event.event;
tableRow.querySelector('[data-id="city"]').innerText = event.city;
tableRow.querySelector('[data-id="state"]').innerText = event.state;
tableRow.querySelector('[data-id="attendance"]').innerText = event.attendance.toLocaleString();
tableRow.querySelector('[data-id="date"]').innerText = new Date(event.date).toLocaleDateString();
// Object.keys(event).forEach(key => {
// })
// -- insert the event data into the table
eventsTable.appendChild(tableRow);
}
}
const displayStats = (events) => {
let total = 0;
let max = 0;
let min = events[0].attendance;
for (let i = 0; i < events.length; i++) {
let event = events[i];
total += event.attendance;
if (event.attendance > max) {
max = event.attendance;
} else if (event.attendance < min) {
min = event.attendance;
}
}
let avg = total / events.length;
document.getElementById('total-attendance').innerHTML = total.toLocaleString();
document.getElementById('avg-attendance').innerHTML = Math.round(avg).toLocaleString();
document.getElementById('max-attended').innerHTML = max.toLocaleString();
document.getElementById('min-attended').innerHTML = min.toLocaleString();
}
const filterEvents = (dropdownItemClicked) => {
let cityName = dropdownItemClicked.innerText;
document.getElementById('stats-loc').textContent = cityName;
let allEvents = getEvents();
let filteredEvents = [];
if (cityName == 'All') {
filterEvents = allEvents
}
else {
filteredEvents = allEvents.filter(event => event.city == cityName);
}
displayStats(filteredEvents); //overall stats
displayEvents(filteredEvents); //table
}
const saveEvent = () => {
let eventName = document.getElementById('event-name').value;
let city = document.getElementById('city').value;
let stateSelect = document.getElementById('state');
let selectedIndex = stateSelect.selectedIndex;
let selectedOption = stateSelect.options[selectedIndex];
let state = selectedOption.text;
let attendance = parseInt(document.getElementById('attendance').value);
let dateString = document.getElementById('date').value;
dateString = `${dateString} 00:00`;
let eventDate = new Date(dateString).toLocaleDateString();
let newEvent = {
event: eventName,
city: city,
state: state,
attendance: attendance,
date: eventDate,
};
let allEvents = getEvents();
allEvents.push(newEvent);
localStorage.setItem('ed-events', JSON.stringify(allEvents));
document.getElementById('newEventForm').reset();
buildDropdown();
}
The code is structured in six functions
getEvents()
getEvents() is a function that returns all of the storedEvents that the user has.
Before returning this array of objects storedEvents, the localStorage is parsed by
JSON.parse() and then it is checked to see whether its a empty array in the localStorage or whether their are any key value pairs
present. If there are no values in the array storedEvents, the global variable
events and its
data is stored inside of storedEvents, a key gets set with localStorage.setItem()
and the value of this key
will be a a string after using JSON.stringify().
buildDropdown()
buildDropdown() is a function that builds the dropwdown with entires that the user can select
from. First the events are fetched
from calling getEvents() and stored in a variable called currentEvents. Next, the
eventCities variable is created by mapping through
currentEvents and it pulls only the city name attribute from the objects. After that, the
distinctCities variable
is created to hold the distinct values from using new Set() on eventCities in order
to eliminate duplicates. After all duplicates have been
removed, the variable dropdownChoices is created which is a array to hold the values stored in
distinctCities using the spread operator ...distinctCities .
After the choices have been for the dropdown, the div that holds the dropdown is cleared by using
dropdownDiv.innerHTML = ''.
After the div is cleared, the dropdown choices are looped through using the forEach() loop.
Inside of the loop, the dropdownItemTemplate
is cloned using dropdownItemTemplate.content.cloneNode(true) and stored in the variable
dropdownItemCopy. A
querySelector is then used on the dropdownItemCopy to find the tag
to set its innerText
to one of the choices for th dropdown and then the dropdownItemCopy is appended to the
dropdownDiv. The span tag in the
displayEvents(currentEvents) and
displayStats(currentEvents).
displayEvents(events)
buildDropdown() is a function that takes the varible events as a parameter and
uses it to build the events table.
First the eventsTable and eventTemplate are found with
document.getElementById(), the eventsTable
gets cleared with evetnsTable.innerHTML = ''. A for loop is used then to loop through the
events. Each event will
be iterated through, the tableRow in the template will be cloned each iteration and the selective fields on
the event objects
will be queried in order to change the selective fields data with the data from the events array of objects.
After the data is inserted
into their respective fields, this tableRow is then appneded to the eventsTable so the data can
display.
displayStats(events)
displayStats(events) is a function that display the stats for the different events in the table
below the dropdown.
A for loop is used to loop through all the events, and before the for loop is finished the max, min, and total
will be calculated
for the attendance of all events. After the for loops is finished, the average will be caluculated. Once these
values have be calucualed,
each value is sotre in their respective column in the stats table.
filterEvents(dropdownItemClicked)
filterEvents(dropdownItemClicked) is a function that will filter the event data for a
particular city
or alll cities. The city name is fetched from the dropdown selection and all of the events are fetched from
calling
the getEvents() function. An empty array called filterEvents is created to hold the
events based
on the if/else statement. If the city name equals all, then all of the events will be pushed to
the filteredEvents
array. Else, if the city name is not equal to All then the events will be filtered by the city name that is
seleected by using .filter() and the
the data wil be stored in filteredEvents
saveEvent()
saveEvent() is a function that will save the event data that is
entered on the modal. All of the data inputted on the form, on the modal, by the user is
are stored in different variables. These varibles are then using to build a new object called
newEvent. getEvents() is called to fetch all of the events and then newEvent is
pushed to
allEvents whcih hold all the events fetched from getEvents(). The
allEvents() varible is then
stored in localStorage. The form is then reset to be a blank formm with no data and the
buildDropdown() method is called
to build the dropdown again.