To get started and code along with me, you can launch the workspace with this video,

or download the project files and open them in your favorite text editor.

I'm going to use Visual Studio Code.

In the project folder, you should see the file index.html, and

two folders, css and js.

The css folder contains the style sheet for this project, and

the js folder contains several JavaScript files.

You're going to learn how to build the API project using callbacks, promises, and

async-await starting with callbacks.

So I named each file according to the tools and technique we're going to use.

First, open callbacks.js and

you will see that I've already provided some code to get you started.

At the top, I initialized the variables that we'll use in our project.

For example, a URL to the API dot open notify endpoint which

returns all people currently in space, a Wikipedia API endpoint, and

a couple of variables that reference elements in index.html.

The function GetJSON uses XMLHttpRequest, or xhr,

to retrieve data from a server via a URL without having to do a full page refresh.

xhr is commonly used by developers to make ajax calls.

It's one of the web APIs you learned about earlier that the browser uses to manage

asynchronous requests.

You can learn a whole lot more about XHR in the videos and

additional resources posted in the teacher's notes with this video.

So the getJSON function initializes an XMLHttpRequest, then gets

the browser ready to make a GET request to the provided URL and sends the request.

XHR request also accept a callback so as soon as the server sent back its response,

it runs the callback function that's assigned to the onload event.

In this case it's checking the server response readystate and

status then parsing the response text to json, and

finally logging that data to the console for now.

Anytime the request changes, this callback function is going to fire and

update the data.

Right below, the function generate HTML creates a new section element for

each person in space and appends it to the div with the ID people.

Then sets the inner HTML to the markup defined in the template Literal using

the data passed to the function.

So this is essentially the HTML template for

displaying an astronaut's picture as well as their name, title, and a short bio.

All right, now that you're up to speed with the starter code, let's get coding!

First I'm going to call the get JSON function and

pass it the URL to the open notify API to make sure that everything works.

The URL is stored in the variable Astros' URL.

Get JSON currently logs the return data to the console.

So checking the console, I see that it works.

The API returns an object with a people array which holds six objects.

So that means that there are currently six people in space.

And we can see the craft and name properties in each object.

Back on our code, the getJSON function is going to be invoked and

execute the code and cite it after some event or user interaction happens.

In this case when the View all the People button is clicked.

So let's create an event listener for

the button using the add Event Listener method with btn.addEventListener.

Pass it the string, click, as the event type to listen for.

Next, as the second argument, I'll pass an anonymous function as the callback,

which will run getJSON as soon as the click event occurs.

I could have passed the body of the getJSON function entirely to add

event listener.

But this approach is much cleaner and modular as you'll soon see.

DOM events like click, scroll, and key up are highly intermittent.

They happen randomly, and the browser cannot predict when they happen.

For example, the browser doesn't exactly know when this button will be clicked.

It may never be clicked at all by the user.

So addEventListener waits for the click event to happen.

And it calls back the function passed to it only when the event occurs.

In our case it's going to invoke getJSON and

use the URL passed to it to make the Ajax request.

There are time when browser is may be flooded and

overwhelmed by different events happening all at once.

Now imagine if each of those events blocked other functions from executing.

So because of this, the order of DOM events is processed asynchronously.

A click on an element with a click event handler, for example, will add a task to

the callback queue which might have other events waiting in queue.

Each will eventually make its way onto the call stack to be executed.

All right, let's test our code.

Back in the browser I'll refresh and when I click the button,

the data from the open notify API gets logged to the console, good!