In this lesson, we're going to be connecting to the random user API.
So this is an API that generates dummy data that you can use.
And also it's good practice material for making JSON and getting JSON data and putting it on the page.
So our application is going to be dynamic where we can select the number of users that we want to return.
We hit the click me button and that results in returning back all of these users.
So these are dummy profiles and we've added in some features into the application where if we click
it, it just puts it here at the top of the page.
So whatever user we're selecting, it dumps it to the top of the page and you can build your own version.
And there's a lot of information that's contained within the API data.
And this is all JSON structured data that you can make use of within your webpage and practice selecting
the different property values and outputting them onto your page.
So let's get started.
I've set up the default indexed to impeach.
So we've got the five for each HTML elements here, the each one, the input, the button and the div
so that we can output data and we've got some basic content on the page and linking OTA up five G.S..
So that's what we're going to be doing, all of our JavaScript construction.
So selecting that page elements cut that into the JavaScript file, also making some updates and adding
the event listener.
That's also double check and make sure that our event listener is firing.
And when we click the button, we do get ready within the console.
So we're ready to make the connection and make the facts request to return back the results.
The API that we're connecting to in this lesson is going to be random user dot com e.
So this is a random user generator.
It's a free open source API that allows you to generate user data.
And it's kind of like lorem ipsum, but it generates people in images and it generates a fairly rich.
Set of data that you can use, and it's also a great API to practice with.
They also have some examples here.
So here's the query example and they give you an example of some of the results that are being returned.
So there are quite a bit of information here within the results.
So let's get to it and connect it to the API.
The API address is just for its API and this is going to allow you to load.
The AP content, and it's actually going to be fought with us at the end, so this is going to be the
content that's being returned back and you can also open up within the Web browser and just ensure that
this is, Jason, a data.
So looking at the page source and if there's no HTML, then this is being returned back as Jason data
so we can make our Fach request and return the data directly back as a Jason object and then use that
as an object within the JavaScript.
So let's add the Web URL and the URL is going to be this one.
So adding it in as a string value and then let's make our Futch request to the Web you URL.
And we'll just create a separate function and I'll call it atter, and let's run that Adir function
in case we need to make some updates to the Web, you we'll pass the URL value directly within the outer
function and then within the outer function.
We're going to first output the data that's being Pastan and this is just going to be the Web you URL.
And we can also call it your URL as well, so that when we click the button, we get the path passed
into the function is ready to move it to the next stage where we'll make the Thach request to the Web
you URL and once we successfully connect, it's promise based.
So we're running the function and getting a response object being returned back.
And with that response objects, we're going to return it back using the JSON method and then the next
part, the next chain within the premises is where we can use data that's being returned back.
So at this point we can get the data and this should be in a proper JSON structure.
And just to double check, let's output that content into the console and let's also make sure that
we're returning back the response object.
So let's try and we see that we get the results coming back.
So we've got results coming back from the API where we've got info and it tells us the basic overall
info that we requested.
We've got page one results, one seed version, and then the results and the results are represented
within an array format.
And we can also increase the number of results that we can return back.
So let's make a quick update to the content and we're going to return back a number of results.
So we'll set a default value of ten results and input.
Val set attribute.
And we're going to set the attribute type two number.
So that we within the input, we're generating a number so it can be moved up and down, and that's
the difference between the input types there with the number.
And we want to add and append to the Web URL if we want to turn back more than just the set number of
results we can add and select to return more results back.
So that's with the added parameter.
So let's get the value of what we've got from input and whatever the current value is.
And also let's update that value so we'll create the string value where we've got the question mark
and results.
So we're basically going to concatenate to the Web URL and then whatever the results value is, this
is the number of results that we want to return back.
So we're going to add those two together, and that should now return back a string result of more items
coming back from the point.
And we can see that a number of results changes depending on what our input is.
So we have a flexible number of results that we can return back.
So let's output into the output area and then we'll send this information out to be output onto the
page.
So output in our HTML and using the back takes again again to select some content from the data so we
can do a seed or whatever the seed value is.
And that's sitting within data, info and seed object.
And most of the time you're going to find that you can use the dot notation.
But if there are spaces or if any of the property names have spaces or anything that's not properly
formatted to be used in the notation, then you can use the bracket notation.
So keep that in mind that you can use whatever one is the most effective one and results.
And this is contained within data, info and results, so let's see what we got now.
So we've got the seed, we've got the results, and you can also pull out whatever other information
that you want, want it to add there.
I just make it larger and wrap it with an H3 tags.
So there's our results and now let's send it over to the maker function and for their maker function,
we're going to use the data and the content is contained within the results array.
So just going to send that array straight over into the function and then loop through the contents
of that result.
So that's coming in from the Jason, or we could just call it data and for now a console log out data
so that we can check to double check to make sure that we've got the content properly.
So we're putting the array of data.
So let's loop through data using for each and loop through the contents.
I can turn back that element and then within the console output, the element content.
So let's see what we've got now and then.
Now it's a matter of selecting from the object the data that you want to output on the page and then
adding it using JavaScript.
So let's select the name of the person.
And also I'm going to create element maker.
So first it will select the type of that type of element, hurricane element type or element tag.
So it's going to be the tag and then the whatever the parent is.
So in those two properties.
And we can also have one for a content, I would just call it contents, so let's create the elements
as we loop through.
So that element type, it's going to be a div.
The parent is going to be output and then whatever we want for the contents.
So in this case, we want to add in some temporary contents.
And I'll just give it a variable name of temp and then whatever we want placed within the elements and
we want to use the name object, so get the name, the title, the first and last.
So from that element.
Let's get the name and title and then also add in the first and last values, so first and then last.
And then this is the kind this wall reference, the content that we want to create and as we iterate
through there, let's we'll create the elements and using their documents and it saves some time when
you can create functions that are going to run blocks of code that you'd have to do multiple times.
So let's append and one appended to that output object.
So this is going to be an object.
So parents append and then we want to append this newly created element to the parent and then for the
element.
And let's do the inner turmoil of the elements.
And that can just be held within the contents variable, so let's see what that looks like.
So that gave us a structure that we can output the names to.
Let's add some more elements to the page.
So if we want to include and have the.
Picture, we can add that as well, so let's select the pitcher object and selecting the element maker
and adding in another div and then the contents of the div, so call attempt to attempt one.
And within the contents of this div, we're going to add in an image tag with our source and the source
of the content for the image is going to be coming from the element.
And let's look at the data structure.
So element, picture and thumbnail or large element.
Actually, it's the picture and then large suit that looks like.
So it gave us the option to add the pictures.
And we can also now that we've structured it, it's going to be easier for us to if we want to create
a parent element that's going to contain these, we can use the document creates elements and we can
use the same maker to create the elements.
So if we want to create a parent div, so the parent is going to be the output object and the element
tag is going to be a div that we want to create and we're not going to have any contents in it.
And if we want we can then instead of output will append it to div and then for the div itself using
class list.
And so let's also return the element so that gives us an option to use the d'Hiv and add a class of
box to it.
So let's check our HTML and do an inspect on it.
So we've got the parents that are box, they've got the title there and then the images within it.
So let's add some styling to that.
So selecting the box, adding in some padding and let's do a display in line.
In line block and set up with two, it's a default with two it.
Now, set this looks like so that allows us to have a little bit more styling on the elements.
Also, let's apply the box sizing to all of them.
And what the box size thing will do is if you use border box that allows you to remove out any extra.
So a width of twenty five percent will be 25 percent of the available width.
And that will also include the 10 packs of padding and then also within the box for images width of
one hundred percent.
So that will spread the available width of the image all the way across.
Let's also do a text, a line and will center align the contents.
Of the fight, let's do an update on the fight sighs And of course, you can style this however you
feel necessary.
I got to add in some Google fonts.
So just select a Google fight to apply a little bit more styling class to it and actually are going
to select the regular one.
And my preferred is to use import, you can also use the link, so whatever your preferences, because
most of the time I am doing this within stylesheet file.
So that way I just import it and I don't have to worry about linking to it.
So on the page, but because I am doing it on the page, I could just as easily just link to it on the
page and within the body object.
We're going to apply the font family.
So that just is going to get applied across the board on the page.
So we've got the font and also lets out a little bit more styling to the devs that are immediately underneath
it.
So doing a border.
And just do a slight border around it and then also maybe a little bit of padding within those as well.
So that just adds that type of effect to the content.
Let's also put some more content on the page so we've got the names and let's see what other information
we might want to pull out there.
We can also add in the email address as well, if you want.
So let's do a line break here and select the email so that one is right on the root of the element so
you can select the email address like this and run through it.
And that's a little bit long.
So let's resize and.
Overflow will do an overflow hidden.
So that way we're not and that will allow us to resize and if right to make it responsive.
Of course, we could add in the media queries to resize the content.
And it looks like this fight is throwing an error.
So I'm going to just update and change it to a different font style.
So select a different flight style and I'll make us bigger so we can do the selection of that font style
and I'll remove out the other ones that were causing the issue.
And let's do an import on this flight style.
So updating our source for the import for the fight stuff and then let's also update the body, fight
family and go back to the application and see how that works.
And we also probably want to make the font size smaller because most of the time we're working on a
smaller screen and then you can adjust the size needed.
So on the smaller screen that I've got the content showing up and it looks like the overflow should
be on the device inside immediately with inside the box so that we don't have the emails that are hanging
over the access.
Also, let's take a look at what other values we can get from the the object and see what else we might
want to update and add to the page.
So then each one of these objects, we've got a date of birth as well, so let's add that date of birth.
So we've got an age and a date.
So going to get into the JavaScript, we just do a line, break their date of birth and then add that
object details.
So that's within their element objects and within a property name to date of birth.
And then we've got the age.
So how about we just do an age here?
And then try it again, make sure that you're outputting so it looks like that left out the dollar sign
there.
Try that one more time.
So we've got the age.
And you can tell that this is just sample data, so it doesn't necessarily reflect the contents of the
user.
And let's do one more where we're at in the location as another object.
So we can add that in maybe under the pitcher and now that we've got the element maker, it's going
to make it really easy to add additional objects onto the page.
So if you want to get the location, it's within the element location and you can also shorten it.
So to make it more readable, if you want, you can get the location objects.
So element location and that will shorten the path to that object property.
So this way I can do a location and select the city and we'll just try that first and just make sure
it's working.
So there's the city and then whatever else we want for location, we can get the country.
So the location and we're just moved where we've got the root of the object content.
And also, let's include the state as well.
And then whatever else you want to include, that's all possible within the API, so that constructs
these elements, provides information about where they're located.
Now, let's do one more thing before we conclude and let's make this element clickable.
So Divx odd event listener and whatever, we click on the elements.
So whenever we click on it.
Well, add in the option that we can update the details at the top of the page, so select where we've
got the H1.
And take the H1.
And let's set the inner.
And actually just set this up as the tax content.
And we can still get the tax content.
Using the temp object so you can do these different types of interactions and actually this should be
in our e-mail because we are passing an HTML their.
So now whenever we click these, we're updating the information here at the top for the user, in addition
for the box Hova.
Let's update the cursor to pointer, so whenever we go on top of them, it's got the pointer.
So it's indicating that it can be clicked and we might also want to just have everything up at the top
as well.
So now that we've got it within these objects, it's going to be really easy just to add the content
in and just save that and just try to make sure it's working.
And let's wrap this.
With a div so open and close ative, and we'll wrap Temperton the.
So that gives us a quick way to access and see the different users that we've generated and we can select
how many we want to generate, and then this will once again update the content.
We'll also move the content to the top.
So using the window and scroll to method in JavaScript, and this requires an object parameter.
And within the object we can specify where we want to scroll to see if we want to go right to the top.
We can scroll it right to the top just by specifying the scroll location, scroll bar location to zero.
So let's try it and move down so that moves it up.
And this is good if you've got a lot of results.
So if you've gone down all the way to the bottom, you want to be able to see that you've made that
selection.
You've brought that particular one up right to the top.
So there's a number of options here and there's quite a bit of data that's within this API, so you
can create your own version of this application.
And I'm also going to do a quick update to the one.
So we'll take each one style.
And sat with.
And so at the margin to auto and you could do this with with styling as well.
Text aligned and or central line the text.
So that will just align the content near the top there.
And then.
Also, let's add in a border.
And test out the application just to make sure it's working, so you do occasionally run into these
course errors and cause issues.
And this is just something that I wanted to note, that if you do come across cause errors and this
API for the most part will work and it does throw these course errors occasionally when we're trying
to make too many requests from the local so that can happen or for making too many local requests.
We see that the cause error, the course issue now, there is a way to go around the course.
And so to avoid that, it's making the request locally you can use.
Cource anywhere, and this is an API that enables cross swords and requests to anywhere, and there's
more information about it, but essentially what you do is you apply the Eurail course anywhere just
before you make the Web, you R-AL request so you could do it like this.
It looks like we're coming across another issue.
And this is because when we're using Kurs anywhere, so it's updating where the request is being made
from.
So this is good if you're connecting locally to a Web API that needs to have a website.
But in this case, what's happened here is that we're getting too many requests from this base.
You URL.
So it's updating the server as it's coming from the CRS anywhere.
So there's probably other people that have been using the CRS anywhere to connect to the random user
EMY, and that's why it's denying the requests.
So there is some throttling on there that it does prevent making too many requests and we have been
making a lot of requests with local.
So that's likely why we're throwing the errors when we're making the requests and you'll find that they
will go away.
Any type of queries there or cause issue.
This is related to the server and you can find out more about how well CRS anywhere works where you
can redirect automatically.
So it's good for debugging and it redirects the results in addition to the course redirect header where
it starts at one and we're headers are not accessible by typical HTTP request API.
And there's more information and more documentation available on these sites, the challenges and the
tasks for this lesson are to connect to the random user API, look through the JSON object, return
back the data, and then go through the data and output it on your page and also build an interactive
web application that allows the user to interact with the data and make use of it and interact with
the page content as well and really get its opportunity to familiarize yourself with getting JSON data
from endpoints.