Setting up

Once you have JSFiddle open, you can tell it to include jQuery. Find the JavaScript square (bottom left), click the tiny cog (top right of the square). Click the frameworks & extensions drop down menu, and scroll to jQuery. Any version number will do everything we need to today.

We’re going to begin by using jQuery (which shortens to the $ character) and getting it to use the get method. This will handle the call to the api for us, we can pass it some properties such as the URL to call, what should happen when the call succeeds, and what to do when that call fails.

Now that we have the console open, click the play button at the top right of JSFiddle. You should see the result of our call! If you have any mistakes the developer tools will hopefully let you know where the mistake was for you to fix.

You’ll see we got back 25 items, which is the default number of gifs Giphy will return. Click into one of the objects and try to find which property has a link to the gifs. (hint: it’s inside images / original)

Next, let’s look at how we navigate through that returned data through code. Let’s start by logging to the console the url of each gif we have. Think before you start writing any code; what kind of loops you know and whether they might work for us here.

I’m not going to link you to the code here, it’s good practice to write it yourself and not copy/paste. I picked a “for each” loop in the above example. So long as you have a bunch of links in the console to gifs any answer is totally acceptable. At this point you can reward yourself with by clicking any of the links to see a cat gif. Gifs are pretty great, right?

Now we have all the links to the gifs, let’s go about displaying them! This might sound difficult to start, but thinking back to our HTML experience, we already know how to render an image. Gifs are only fancy images.

Not everyone likes lolcats, some people like lolpuppies. How would you go about adding in a text field to allow people to type what they want?

Maybe you want to allow people to use these gifs in a conversation, and instead of showing many, we’d only really want one gif. How would you go about selecting one, maybe at random?

In the next part in this series we’ll look at using an API to talk to things in the real world, which will become our own Internet of Things!

Related posts:

This sprawling tree can expand very well in an indirect gentle setting. Nevertheless, Consider to usually h2o it to maintain the soil humidity all the…

One of the most important things in life is to have friends but not all friends are good people even though we think so. You have to look at their behavior and wordings. Sure that can seem like a…