We'll be exploring making API requests and displaying the results in Bootstrap components. When you're done, you'll be able to make a page not unlike this random dog generator.
Pick one of these APIs to play with!
Be warned that some APIs in the last two lists are difficult to use. We can always try to help you navigate them!
- The Random Dog API
- The Dad Jokes API
- TheCocktailDB
- Fancy Tacos
- Chuck Norris Jokes
- Random Kanye West Quotes
- The Bored API
- The Punk API (Craft Beers)
- Something from this crazy list of APIs
XML HTTP Requests, or XHRs, are a callback-based method built into browsers for making network requests to APIs. They allow us to access data on a server, whether it's our own server or a public-facing server for another app. Our app might want to access its users' information to display to them, or we might want to tie into Google's Maps API to show them where something is. Either way, XHRs will allow you to access data that's not immediately a part of your app.
Here is a breakdown of the steps to making a simple request using XHR:
- Create a new XMLHttpRequest object. The syntax for this is a bit new, but it's basically a factory function that returns the object we want with all its many methods and properties. Note the weird case inconsistencies with the acronyms! (Pick a LANE, coders!)
const xhr = new XMLHttpRequest();
- Add an event listener to the
xhr
object you got. We'll listen for aloadend
event, and then take the JSON the server sends us (on the propertyresponseText
on ourxhr
) convert it to a JS object and, for now, print out that object to our console. Note how similar this is to DOM event listeners!
xhr.addEventListener('loadend', () => {
const data = JSON.parse(xhr.responseText);
console.log(data);
})
- So all we did there is set things up to deal with a response, but we haven't actually made a request yet! We don't want to do that in the global scope for a number of reasons (including that we don't want it to make that request every time we make a change in our code and LiveServer reloads the page, running all global code!), so query the button (actually a link; check the HTML!) and add a click event listener to it.
// Code not pictured; you've got this one!
- So when they click the button, THAT'S when we want to send out our request. In your button's click event listener, use the
xhr
open
method to set up (but not send!) aGET
request to the url of the API you chose. The first argument toopen
is the type of request, and the second is the url.
xhr.open('GET', 'https://someurlbutnothisone.com/random')
- It's PROBABLY a good idea to specify you want JSON, although many APIs default to it or in fact ONLY use JSON. We do that by specifying in the "header" of our network request that we'll be accepting JSON. NOTE: if an API says you need to add a header for something else as well, this is the method to use!
xhr.setRequestHeader('Accept', 'application/json');
- Finally, we're ready to send that request. The
send
method on thexhr
object can also take an argument if we need to actually send additional information (as with aPOST
request for example; what are we posting?), but with aGET
request, we can simply hit the send button.
xhr.send();
- Check your console. You should have an object printed out! Now it's time to DO something with that object. Find some relevant info in your object and either put it in the
p
tag (if it's text) or theimg
tag (if it's a picture). Check your html!
You may have noticed that our interface is very very basic and also about dogs. Let's work on the dog part first. Unless your API actually WAS about dogs (the best ones are!), change the heading and subheading and button text and anything else to match your actual app!
Okay, now that your content is specific to your app, let's add some Bootstrap and make it look... pretty good?
- Go check out the docs for Bootstrap's card component. We'll wait!
- Now let's add some of those sweet card classes to the right elements and watch our site get way better! Start with the
.main
section
. Give it the additional classcard
, and check out the differnce. - Next: give the
.button
element the additional classesbtn
andbtn-primary
. - Give the
h5
element the classcard-title
. - Give the
h6
element the clascard-subtitle
and, optionally,text-muted
(try it and see if you like it!) - Give the
p
element the additional classcard-text
. - Finally, give the
img
(if you need one) the class ofcard-img-bottom
.
You should now have a decent-looking site! If its look doesn't approximately match the one linked in the Introduction, you may have missed a class or two. Check over your code and look at the examples in the docs!
Stretch goals coming soon!