This project is an online journal that allows users to keep track of destinations on their bucket list and then capture diary entries when they actually get to visit these sites. It was further practice with using data from multiple collections in a Firebase database.
As a user, when I go to the Travel Diary site, I can see a list of destinations, organized 3 per row.
AC
WHEN I go to the Travel Diary site,
THEN I can see a section titled Destinations,
AND I can see multiple destinations listed in this section, organized 3 per each row.
Dev Notes
Create a destinationData.js - write a getDestinations function to get data from Firebase using an axios promise. Note: Because the data we are getting in the response from Firebase is an object of objects (that's how seed data is stored in Firebase), then we need to reformat that into an array so that we can loop over all the destination objects and we also need to push the main object name which is the destinationId into an id property on the destination object. That's what we do with the `Object.keys ..." code in the get call.
Create a destinationsContainer.js:
Import the data from the destinationData.js file.
Import utils for printToDom.
Import destinationCard data.
Write the buildDestinationsContainer function, which:
--calls the getDestinations function and then does a .then() and .catch().
--In the .then(): (1) we build the domString for the container and then do a forEach method to loop over all the destinations and print a card for each - calling the individual buildDestinationCard function; (2) We call utils.printToDom to print the container of destination cards.
--In the .catch(), we pass the error into a console.error.
Be sure to export the function.
In the index.html file, add the destinationsDiv div.
In the authData.js file:
Import data from the destinationsContainer.js and add it inside the checkLoginStatus function but outside the if statement that checks if the user is logged in or not - so that it runs every time.
Add a const variable for the div with the id of destinationsDiv and then indicate when the hide class should be added or removed in the checkLoginStatus function.
User Story
As a user, when I go to the Travel Diary site, I can see a list of destinations, organized 3 per row.
AC
WHEN I go to the Travel Diary site, THEN I can see a section titled Destinations, AND I can see multiple destinations listed in this section, organized 3 per each row.
Dev Notes
getDestinationsfunction to get data from Firebase using an axios promise. Note: Because the data we are getting in the response from Firebase is an object of objects (that's how seed data is stored in Firebase), then we need to reformat that into an array so that we can loop over all the destination objects and we also need to push the main object name which is the destinationId into an id property on the destination object. That's what we do with the `Object.keys ..." code in the get call.buildDestinationsContainerfunction, which: --calls thegetDestinationsfunction and then does a .then() and .catch(). --In the .then(): (1) we build the domString for the container and then do a forEach method to loop over all the destinations and print a card for each - calling the individualbuildDestinationCardfunction; (2) We callutils.printToDomto print the container of destination cards. --In the .catch(), we pass the error into a console.error.index.htmlfile, add thedestinationsDivdiv.authData.jsfile:destinationsContainer.jsand add it inside thecheckLoginStatusfunction but outside the if statement that checks if the user is logged in or not - so that it runs every time.destinationsDivand then indicate when the hide class should be added or removed in thecheckLoginStatusfunction.