FCC Intermediate Front-end Projects

Random quote generator

Codepen link

My version shows funny/scary George W. Bush quotes. I checked all the references before adding. 

I think this one was intended to use an API, but I just hard-coded the quotes and sources as a big array. I had a background image, but the link had expired since I looked at it last. I like it better with a plain background.

For now I’m just copying my code from Codepen. I know there are some small things to add before it would work on its own, but I’ll leave that for later.

Some possible improvements:

  • Have the quotes in a separate file
  • Make sure the quote box doesn’t overflow the window if the quote is too big
Show the local weather

Codepen link

This was my first API project. All the image links and APIs were broken, so I fixed those. I used emojis for the weather icons.

Future improvements:

  • Hide API keys in live version
  • Cache location and current weather 
Wikipedia viewer

Codepen link

The hard part about this one was finding helpful documentation for the API. 

Twitch stream viewer

Codepen link

This one was broken because I had autosave on when I was cutting and pasting. I got it working back mostly how it was. It uses the new API also. 

The hard part about this one was that I had to make two API calls for each user to get the info I wanted. I was requesting by username, but the response of one of the calls was sorted by user id (a number). I had to match usernames to user ids so that I could get the title of the current stream.

Future improvements:

  • This would be a good one to rebuild using React.
  • Enable adding or deleting streamers
  • Display message for ‘user not found’
  • Enable webhooks so it can live update
  • Use promises or callbacks so functions run in order. Right now the second call is in the success function of the first, and the build function is the success function of the second.