klearanime / bootstrapi

BootstAPI

Introduction

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.

Part 1 - Pick an API

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

Part 2 - XHR

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 a loadend event, and then take the JSON the server sends us (on the property responseText on our xhr) 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!) a GET request to the url of the API you chose. The first argument to open 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 the xhr object can also take an argument if we need to actually send additional information (as with a POST request for example; what are we posting?), but with a GET 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 the img tag (if it's a picture). Check your html!

Part 3 - Basic Interface

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!

Part 4 - Bootstrap Stylin'

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 class card, and check out the differnce.
• Next: give the .button element the additional classes btn and btn-primary.
• Give the h5 element the class card-title.
• Give the h6 element the clas card-subtitle and, optionally, text-muted (try it and see if you like it!)
• Give the p element the additional class card-text.
• Finally, give the img (if you need one) the class of card-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!

Part 5 - Stretch!

Stretch goals coming soon!