My name is Jay.

And in this video, I want to show you how you can use a public Ap.

Let's see.

So for Disney video, we're gonna be using open weather map dot Orc.

They have very, very simple AP.

I have Aton of data that we can use.

So if you go there and then you click a P I you will see all these options right here.

But the one that I want is this one first one, the current weather data.

That's the one that I want.

Okay, so click subscribe.

You will see all these options.

I'm the one that we're gonna use is the free version, which is gonna work for this video.

Any words for, like, a professional website and stuff like that.

So click on to get a P I ke and start, So you need to sign up just like a normal website.

Does your email on password, all that stuff and they're gonna give you an A p i ke.

Um so that way you can request all that data, So let's test the AP, I So let's see if it works.

I have here in the U R L that they provide, which is this one right here.

All right, so now we need to add a question mark.

Q equals to whatever CD, and you can see that I haven't already there.

So I live in Orlando.

So is Orlando.

And then And ap have I d equals do whatever a p I ke they gave you.

All right, so that's mine.

Don't try to use mine, because it's not gonna work for you.

I'm gonna hit Enter and here you go.

So I have all the data from the current weather in Orlando is great.

One thing that I want to do right now is because if you can see here on temperature, that's isa different unit.

We use a different unit, so I'm just gonna put it right here after Jews.

And so he's gonna be unit equals to imperial.

And then and I'm gonna leave the app i d I'm gonna hit enter again.

And now we have whatever you use.

You can change it, but is it what we use in the United States?

Cool.

Now that we have these oil ready to go, I'm just gonna go to my text editor and start coating here have on a steel mill file.

The only thing I have is requesting J Query was gonna We're gonna use it to request the data.

We have a script on Daddy.

Ah, yes, which is empty.

And we have a style dot CSS is empty.

We're gonna add some stuff in a minute.

So let's start by adding some html here.

So the first thing I'm gonna do, I'm gonna add a container.

Everything's gonna be inside that container so you can be like, weather container.

Okay.

And inside there, we can do paragraph, and then we can add, like, a class off.

Um, this can be actually, you know what?

First I'm gonna add an icon like if it's raining.

If it's raining, we can do like a rain cloud with some drops or whatever.

If it's sunny, we can add, you know, a son or something like that.

So best icon there's put Icon is a class is gonna be like the name.

So if it's raining is gonna be like rain.

If it's stunning, is gonna be sunny.

So this is weaken a bit.

Name it.

I don't know whether whatever you can name it whatever you want.

So let's create another one.

And this one eyes gonna be a temperature.

Of course, Tank.

All right, cool.

I think that's all we need for now.

Like, if I want the weather, I just want, like, you know, whatever is happening in the temperature.

And then they I can do something cool.

You know, that we like to see it's a message for HTML.

I'm going to save it.

And then four d Jeff, a script go here because we have Jake Query.

We can use something called Get Jason and get Jason is going to get all these data for us because this is Jason is Jason file.

So let's go back there and let's do I'm dollar sign dot Get Jason just like this, and then we're gonna do inside here.

We're going to the u R l coma and then function.

Sorry.

Function just like that.

All right, so we need to include that your l Here, let's go back and get it.

Where is it?

Here.

ISS copy.

Pasted right there.

All right, so what?

I'm gonna D'oh!

I'm gonna put here inside the function.

I'm gonna put data all the data is gonna be inside there so I can do something like Consul.

Don't log data, so I'm going to save that and let's go back here.

So this is my pace right now.

I'm gonna reload my page, and here you go.

We can see all the data, the same thing we have here.

We can see it.

We have it now available for us on the website.

Everything is here.

All right.

Cool.

Now that that's working, let's go back.

And here inside the function we're gonna do like, let's create the variable of the icon toe lift variable icon.

And I have a your l that they provided for everyone to get the icon.

So if we go here, let's see if they have here on weather.

So you can see that there is a icon here and there is like a number in the letter.

You understand how we gonna use days in a minute?

So they provided a euro for that I consulate, see, was open here and let's go back.

And what was the code is what 11 dealers copy and paste it dot PNG.

Look at this.

So every single thing It's a different thing.

Depending on the weather, that icon is going to change and it's gonna be these euro cool.

So let's go back to my code.

Let's do Oops.

That's not what I want.

I want the euro, which is death, and then I'm gonna do plus and we need to add, um, that, um, code, which is gonna be data dot Let's go here.

Let's see.

So these data dot weather zero and then dot icon.

So these data dot weather zero.

And is it because it's an array?

It's a lest You can see that we have groups quit.

We have 01 and he's in a ray.

So we need to do score bracket zero and then dot Icon, that's it.

Now we gonna have.

If we call icon, I'm gonna have this and then whatever code it iss And actually I need to add a PNG file.

So the PNG format.

So let's go plus sign and dot PNG.

Now that's gonna work.

There you go.

So now let me call the icon and see if it works.

Log icon.

All right, let's go bagless Reload this page.

Here it is.

Let's click on it does it.

We have the icon.

All right, so let's go back here.

So that's working.

Let's remove Consul log.

We don't need it.

You know, What I'm gonna do is I want to add that icon inside this image.

So let's do it, Gloria.

Sign can that, Dad, um, the icon class.

And then we're gonna do attributes, and then attributes is gonna be this force.

And that source inside that source is gonna be the icon, which is Hold this.

All right, Cool.

Let's save it.

Lifted.

That works.

Let's reload the page.

Yea, we have here.

It seems like it's like thunderstorms or something really bad is going on here, which is true.

Like, today's a very rainy day.

So yes.

Um, all right.

Cool.

Till we have the icon don.

So let's do the same thing with the temperature.

So let's create another variable.

Let's call attempt equals two.

It was gonna be data dot I think is weather dot tank.

Yeah, I think that's what it is.

And this is gonna give us that number.

So let's go back.

May should make sure that that's true.

All right.

Um, no, Actually, it's Maine.

So I have to fix that.

So it's a main dot temp, so let's go back.

It's not weather is Maine?

All right, cool.

Now we do the same thing.

We're gonna go here, and this is the dart in the class temp.

But this time we're gonna upend that data.

And this was gonna be a temp.

Let's say that and let's see what happens, does it?

Here we go.

We have to have the temperature.

We have an icon temperature and I think we're missing.

Were whether text, like it's raining or it's not raining, Sonny.

What?

What it iss Let's go back.

Let's do that.

Let's do it right here in the middle.

That way we are, like, organized so variable we can create something called whether weather name or whatever you want equals two data dot weather.

Let's go back and see where it is.

So weather.

And then there's the arrays.

I'm gonna get the 1st 1 and it's gonna be thunderstorm.

Okay, so there's thunderstorms.

So whether zero dot main Then we're gonna go down here.

You want to do the same thing we're gonna get the weather dot Penned was upended data, and it's gonna be?

What?

Let's save it.

Let's see what happens if it if it works.

Yeah, There we go.

We have the cloud.

It said So we have thunderstorm and is 86.

Now, I don't wanna show this 0.49 point 49 as one show 86.

And there is a trick.

We can do it right here on the weather.

No, actually, the temperature.

Sorry.

We can do math dot floor and let's see if that helps groups.

Sorry, Is math like this?

Let's go.

Cool.

Now we have only 86.

All right, so you don't have to do the math floor.

Actually, there's some other options.

Um, so I'm gonna put a link in the description if you want to play with this, Uh, but I think that's it.

We just I need to kind of make it later prettier because right now it looks very, very weird.

So let's go.

Let's add some CSS.

Let's say weather container.

Let's do like, you know, like a great background.

Let's you know what?

Let's let's line everything to the center and we have the weather text, the one that sets thunderstorm.

Right now.

Let's do fun size mom like 22 pixels bigger and let's remove all the margin because I know paragraph half like margin.

We have attempt like the temperature weaken.

D'oh!

This one I wanted, like pretty big.

So let's do light 60 big salts.

Um, same thing.

Margin zero.

And oops and font.

Wait.

I wanted to be bold.

All right, let's say that I think that's that's good for now.

Let's reload the page.

And here it is.

So you have the icon.

It said, So we have to Thunderstorm and 86.

So let's see what happens if we change like Orlando, Um, to like New York, for example, is going there.

Let's go here, Let's say, um, you know what?

Let's do something real quick right here so we can do that very easily.

So it's Dr Variable called CD, for example, and right now is Orlando.

And right now in the euro we can do it.

Let's remove the name Orlando.

We just closed the Orioles.

There we do plus sign CD plus sign, and then we open the your elegant.

All right, so now this is coming from this variable.

Okay, so let's save it to see if it works.

Yep, same thing.