Coming to a close on Phase 1 of the Flatiron coding bootcamp, I look back at what we have gone through and am a little surprised at how much has been accomplished.
I helped create a webpage database that uses an external API to fetch and organize information from the government monitoring library Fish watch.
We started by finding the open sourced API and created our fetch request. first to the API then to turn the .json data into something legible for our local environment to understand. It went a little like this:
You can see we reach out to the API and pass the returned .json data to be turned into something legible by our local machine. we then took that data and ran it through a console.log to make sure we were collecting the correct data. which in that case we were! Now instead of breaking it down step by step I'll just share a couple big take aways that I learned. This project was something that really solidified my understand of manipulating the DOM. Having to make use of tools like console.logs and debuggers to make sure when we created our listener events for the page that we were not breaking the flow of our code.
the piece of code I was most proud of by the end of the project was the function that rendered our fish information, pictures and functionality all in one. (best practice? probably not, but it was still impressive to me.)
We first created the variables we were going to need to properly place the information on the document and have content appear on the page. Creating a div "liveWell", an h1 tag, a couple P tags, and another div which would act as the container for the images and information. Next we went on to populating the page with the content.
We first worked on creating the image variable so we would be able to access the data, giving it an alt id as well to make it an easier process down the road. Also created the container for the details where all the P tags would sit inside the cards. We added the class so we could tie it to our event listener that we created a little later on.
We also needed to add in classes for the pulled elements so we could target them and append them to our containers:
We specifically targeted Taste, Protein content, and Health benefits. Using the title of each container to be the space for the species name.
And now since we had all our information all we needed to do was append it to the page!
At this point we just were not getting the information we desired so we, came to the conclusion that if we interpolated we could access the data we were searching for and get it to act for each individual fish based off of the elements within the objects.
But wait! now all the data was showing but we needed all of our appended data to hide behind the images of the fish. What did we miss? That event listener I had mentioned earlier! So we went back and attached it and ended with the final piece of code:
It looks like a lot but being able to break it down and know what each line of code is doing was a big success and kept me wanting to fish for more Data.
If you'd like to check out the page we created please check out the repo here!
Top comments (0)