Okay, welcome to your final project.
We are going to be creating a random Star Wars character,
a generator using jQuery and JavaScript.
So what I want you to do here is go to this URL here,
I'll zoom in so you can see this.
And we need to go to this URL here.
And we can see all sorts of stuff that we don't want routes all we want an ID.
So let's go to ID.
And we can go to, for example,
slash Star Wars API slash api slash ID one dot JSON.
And we get Luke Skywalker,
and we also get an image and a Wiki and all sorts of other stuff in there.
We could go to character.
I think there's only 83 in here.
Yeah. This one doesn't have as much information,
but at least he's got a name and an image,
which is really all we want at this point.
Let's go to 84.
There's one, there's a bunch of new information in here, I think.
But there's not a 100 characters,
there is not 100.
And let's see if there's 90.
Let's see if there's eighty seven,
eighty eight, eighty nine.
This is important that we do this.
Ok, there's 88 characters,
so we need to randomly get a number between 088 and go to
this URL and replace 88 with a random number.
And then on our page I want you to be able to show
the name of the person and their image.
And so we're going to need to work with some inner text.
We're going to need to work with changing an attribute.
We're going to need to work with a get request and some random numbers.
Now, I want you to,
if you can, if you know enough,
JavaScript tried to do all of this on your own at this point in
time without watching me do my solution.
Now if you get really, really stuck, first of all,
definitely go and google,
half of web development is Googling stuff.
But if you get stuck on Google and you don't know where to go,
you can always come to the learning to code Facebook group or
simply resume this video once I fade out and fade to black.
And then you can watch me do my solution.
So I want you to go ahead and give us a shot at it can look like anything you want.
By the way, this is completely up to you.
Make it look amazing.
If you want, make it look terrible.
If you want that is 100% up to you.
Go ahead and create a random Star Wars character generator
based on the very little information that I have given you.
And I've purposely given you very little information here
because this is going to be very good practice.
As a professional web developer.
People are going to give you very little information
and you're going to need to work with it somehow.
So I'm going to fade out and then I'm going to fade
in and you can watch my solution later.
So just make sure you pause when the screen goes black.
Okay, let's go ahead and create a random Star Wars character generator.
So the first thing I'm doing here is I'm looking at
my API endpoints and I'm reading through it.
And this is very important to read through it.
Don't just take someone else's where like my word from earlier.
Actually read through it if you can.
So we have a base URL or a cached CDN URL.
Let's go ahead and use this cache CDN URL.
And we have two routes.
So we can use this URL slash,
all dot JSON or slash ID.
So let's go ahead and do slash.
One. Is this gonna work for me?
Nope, that's not gonna work for me.
It's gotta be slash one ab.js IN problem for probably, right?
Nope, that's not going to work either. So that wasn't working.
So we read through this and we see that this says ID,
but it should actually say id and then the number dot JSON.
And so documentation could be slightly better here,
but we see an example of it here.
So let's go ahead and put that URL in here and do slash ID,
slash 1 dot JSON.
And we get Luke Skywalker.
Now, how many characters are there?
What's our maximum number or maximum number is going to be 89.
Nope, that's not going to be right.
It's going to be slash ID slash 88 dot JSON.
There we go, captain plasmas,
the last character we have,
so we have numbers one through eight,
which we can work with.
So let's go to our code here and let's create a button.
And it says generate character.
And we need to,
when this button is clicked,
dot on click, do a thing function.
So that's just registering a regular click events.
Now we need to do some sort of GET requests.
We can do dot get and then that URL.
And so I have this URL in here,
and I'll make that just a touch smaller as just 88 dot JSON,
whatever that's going to be just returned that that's fine.
We can change that later.
And then we want to get that data and console.log the data.
We want to make sure that this is going to work for us on our browser.
So let's go back to our browser and refresh our page, generate character.
And it did, it got Captain fascinating God,
our information in here, that's perfect.
But now we need to randomize it because if we click it again,
it's just going to keep getting a plasma.
So let's go ahead and randomize that number.
We know we need to create a random number and this is not jQuery,
this is just JavaScript.
So we can do constant.
Random number is equal to math dot random.
And this is going to give us a number between 01 times 88,
and that's going to give us a number between 188.
And then we want to do math dot seal.
And so what random is going to do is it's going to actually give us a weird number.
It's going to be 0, 1-2-3, 4-5-6.
That's gonna have a bunch of decimals and we don't want that.
What we want instead is whatever that number
is multiplied by 88 and then bump it up to the closest highest number.
So if it's like 74.1,
it's going to now be 75.
And let's go ahead and change this to a template literal.
This is just regular,
plain old JavaScript at this point.
And we're going to put random number in here.
Let's go ahead and save that and refresh our page.
Generate a character 0 random number is not at a typo somewhere right there.
Okay, let's try this again.
Here we get an Chewbacca id 13.
Id, ID 21.
These are all low numbers. Strangely, ID 64. There we go.
So now we need to get their name and their image.
So we've got all sorts of stuff.
We've got like when they're born,
born location yada, yada.
We want their name like palpating and an image.
So let's just scoot this down just a wee bit.
And let's go ahead and put a name in here.
So let's do H1 name.
Let's just leave it empty and let's select an image.
Src is going to be nothing as well.
Please give this a class of
character I mg. And let's go ahead and work with some of this.
So now we know we can fill name with data name,
data name, and that's accessible.
And when I click in here,
this is all the data in an object.
I can scroll on down to name.
So now I can select that name.
I can do H1 dot name.
2.txt is going to be data name.
And so we see nothing. Boom, boom, boom, look at that.
It is working so nicely right now.
Let's go ahead and add an image as well.
And that's also, let's zoom out because we are at like
250% that's getting dressed to be too much.
Now we can select that image,
we can select the character IMG.
We can select that attribute of SRC and set
it as what we have, what in here.
If we look at it,
it is just called image.
So we do data, IMG.
Okay, let's see if this works.
Okay.
I have no idea who that is, but cool.
Cuckoo, cuckoo. All right.
All right. All right,
yeah, this is looking pretty good.
So basically we have this working now.
Now we can make this a little bit nicer if we
wanted to by adding a little bit of styling.
So we could do something like style.
We can select our H1, text align,
center, text-decoration, underline, font family.
Let's do a san serif font.
Doesn't really matter what the font is,
just a Sans Serif font.
And let's generate character name underneath that.
Let's do button.
Display is going to be Block,
margin is going to be auto,
and this should be centered.
There we go.
That looks a little bit better.
Let's go ahead and style that image a little bit.
And we do IMG.
Width is going to be, let's say 200 pixels.
The height is going to be auto.
Bach shadow.
Ten pixels, ten pixels.
Let's give it a little bit of a blur.
And let's make it black.
Now let's see what this looks like.
Oh, that image didn't show up and probably doesn't have an image.
Okay, not bad, not bad.
Let's go ahead and center that as well.
Let's do display, block, margin, auto,
character generator, Greedo, character generator,
deadbolt, character generator, all sorts of people in here, look at these.
And so that is our random and character generator.
That is a terrifying photo.
And we did that technically in about seven lines of code. Yeah, it's somewhere on there.
So we've got mapping run 12345678 lines of code.
So we have our event listener.
Whenever you click the button randomly get a character.
Randomly create a character or a number,
rather rent randomly create a number, get.
And then just the URL,
that's that API URL.
And instead of getting like 88 dot JSON or one dot JSON, and we just said,
every time you click that button,
create a new random number and put it in here.
Then when it's done, we have a call back function and we're simply
getting the name and the image,
and we're setting that H1 name and the character Image attribute, the SRC.
That's all there is to it.
Now, mine is pretty ugly.
If you wanted to take my code and make it significantly nicer looking,
please be my guess I would love if you could do that.
Don't forget to share your project.
It is really important that you share your project with the rest of the class.
It is both inspiring and helpful to other people to
see your code and to see what you've been working on.
One last thing, if you are like,
well, what is Math.sqrt, math dot random.
These were covered in JavaScript one-to-one and JavaScript to one as well,
where we actually made a very,
very similar project using just plain vanilla JavaScript.
This way is just a little less code using just straight jQuery rather than just straight.