Day 17 (week 4) — Grabbing API data using Fetch
The morning started with a nice review of Promises. I know that I started feeling better about Promises, and I think others in the cohort did as well. I think this is just another example of how well the deep immersion technique can work. Just get in there and start playing with things. Ask questions. Make some progress. Feel better about knowing more than you did yesterday.
We also got a chance to work through some examples use the Fetch API to retrieve data from various sites. The Github API seemed to be a favorite. Seeing the fetch call and subsequently working through how the Promise returned was resolved went well. I experimented here a bit with fetching two different API endpoints and the combining them in some way. I got a list of repos in my account and then provided a date range to filter those results.
The pair programming exercise this morning also went very well as we modified the activity from yesterday to use Fetch instead of XMLHttpRequest. My partner and I finished this up and had some extra time before lunch to experiment with a few things.

After lunch, we started the daily project — a recipe search page. You type in a food and the site makes a search request to an API called Recipe Puppy. I finished the code for getting the data in about 30 minutes and then spent the rest of the time styling the site. It’s difficult for me to come up with new and cool designs, but I put something together. The code is here, and the site is here. You type in an ingredient or food, and you get back a list of recipes with some clickable images that link to the page with the recipe. Some of the recipes don’t have images, and we just used a placeholder graphic with the image size in those cases.
Not necessarily a work of art, but the logic for the site went together nicely. I was happy to be able to code the Fetch part mostly from memory without too much Googling. :-)
The Recipe Puppy API also supports a search that involves a list of ingredients. I experimented a little with this, but didn’t incorporate those changes into my site.
Along the way, I found some interesting resources for generating CSS to get nice look buttons and text input boxes. I also used the Adobe Color Wheel because I thought it would be nice to have some complementary colors. Not sure how well this worked, but at least the site isn’t just black and white.
It was a solid day with some good work. The homework for this evening is all about CORS, cookies and tokens, and a bit more on using Github in a group setting.
