It’s the little things

I recently created two little projects: a Quote Generator and an Infinite Scroll. Both used an API and both were written in JavaScript. This is my experience creating them.

Quote Generator

I created a quote generator that uses the Type.fit quotes API, Twitter Integration, and a simple loader.

I iterated through an array of quotes to display them for the user. They are selected at random from the API data. The user can then post their favorite quote to Twitter.

Infinite Scroll

The Infinite Scroll project uses the Unsplash API to retrieve pictures. I had to use the scroll DOM event. When a user scrolls to a specific location, then more data is loaded. I started with loading 5 photos, then 30 are loading asynchronously. This gives it the appearance of an infinite scroll. The images are never-ending — you’ll always have plenty of beautiful images to view!

I used loading.io to find a fun loader and customize the colors as well as Google Fonts to find a font.

Here’s a quick run-down of how it works:

• In order to get the photos, it fetches to the API URL.
• The Unsplash API server sends back a response in JSON, which is an array of photos.
• Then I iterated through the array in order to display each photo with a description and a link to the photo’s source.

I’ve been taking a class on Udemy which has inspired me to continue creating small projects learning a couple of things at a time. I highly recommend it — it’s helped me review the basics.