Where I live is absolutely crazy Right now we have thunderstorms.

Tornado warning snow literally.

Everything you can think of is going on right now.

So I'm thinking, Why don't we look towards Mars, see what the weather's like there?

Because right now I'm thinking it's probably gonna be better than here.

So I enlisted the help of the absolutely amazing Kevin Powell to create the HTML and CSS four this Mars weather app.

And today we're gonna take the Java script portion and actually make this HTML and CSS function and give us the live weather of Mars.

So let's get started now.

Welcome back to Webb.

Dead simplified.

My name's Kyle, and my job is to simplify the web for you so you could start building your dream project sooner.

So if that sounds interesting, make sure you subscribe to the channel for more videos just like this one to get started.

I have all the code that Kevin created in his videos Open up on the left hand side of the screen and the output of that code open on the right hand side of our screen.

And as you can see, we have this really nice looking weather app.

But all of the data is just placeholder data.

And if you are interested in figuring out exactly how Kevin created this, make sure you go over to his YouTube channel.

I'm gonna have linked in the description below where you can watch his videos, where he built out all of this.

But if you want to just jump in straight to the Java script, you can also go to the get hope linked in the description to get the exact code as you see it on my screen so you can start exactly where I am now for us, what we want to do is actually hook this up to an A P I.

That gives us live weather updates from Mars.

And luckily for us, NASA has an A p I, which is going to give us live updates straight from Mars, which actually gives us the weather on Mars.

And this FBI is kind of cumbersome to use.

It's got really annoying key names and stuff to deal with, but I'm gonna show you exactly how we can break this down and use this ap I So the first thing I want to do is just hook Ah, wrap up to the A p I and start fetching data from it.

And we can use this a p I A girl right here.

So just click on this.

Make sure we copy this girl because this is going to give us the data.

And for your purposes, you're gonna want to get a special AP ikey.

Right now, the a p i ke is just the demo.

A pikey where you can get your own a pikey by just searching for NASA a p I.

So now let's open up our job script file.

As you can see, Kevin's already done a little bit of JavaScript just to make this taco section down here actually function, so that's nice.

But what we want to do is actually get to the a p.

I working.

So we have that a p i euro, we're gonna call it a P.

I clips a p i euro and just set it to that euro that we just copied over.

And we're gonna take our a p i ke out of here, and we're gonna set that into its own variable, which we're gonna call a p i ke just like that.

And now inside of this, a PR girl pushes injector a pikey back in there by using string interpolation This way, when you update your own ap I ke all you have to do is paste it in right here, and you don't have to change anything else with this code.

Let's just remove some of these comments that Kevin has in here.

And now with that out of the way, we can actually work on Queen this ap I So what we want to do is just create a function.

We're gonna call this get weather and what this is going to do.

Is this just gonna query that a p I but using fetch.

So we're just gonna say, fetch here.

We're gonna fetch that a p I euro.

And then what we need to do is just call dot Then this is going to give us a response, and we just want to convert that response to Jason by calling reds dot Jason next.

What we can do is we can do another.

Then this one is going to contain our data, and this is just going to be the data from the A P I essentially all of this Jason that you see here.

And we're just gonna long that out for now to see exactly what we're working with.

So if we inspect our page goto our consul and we make sure that we call this get weather function, we should see that we have a bunch of different information being printed out straight from the A P.

I.

You can see we have information for day for 51 4 52 for 53.

These are called souls there the individual days of the cycle of Mars.

And as you can see here, we have our soul keys, which correspond to those days up here.

And then finally, we have this validity cheques section which, for our use cases, were just gonna ignore because we're just gonna trust the data that were given to us from the NASA ap.

I so in order to parse out this data into the information we want, which, as you can see in our case, we want to get these soul number, we want to get to the actual high and low temperature, as well as if I increase my screen size here.

You see that?

We want to get the wind speed and we need to be able to convert these between Celsius and Fahrenheit.

Everything in this a p I is going to be in Celsius.

So all these values air Celsius which make sure that we keep that in mind when we're creating this a p I.

And really all of the information we want is inside of these numbered sections for 51 for 50 to 4 53 so on.

So we're just gonna parse out just these numbered sections for all of the information we need.

So in order to do that, let's just put this off to the side.

So we can see are a pie data and what we need to do instead of here is get all of these different numbered sections and a really easy way to do that is by using the D constructor of property as well was the spread operator which I'll show you right now.

So let's just say const here and we're gonna define a bunch of different variables based off of our date a variable here, so we're gonna d structure our data into multiple different variables.

Our 1st 1 is going to be our soul keys, which is this property down here.

Our next one is going to be for our validity checks.

So just type in validity checks.

And then what we can do is we can say we want to get everything else, which is all of these different numbered sections.

So we could just put a triple dot here and call it whatever you want.

In our case, we'll call it Soul Data.

So this soul data variable is going to be everything in for 51 4 52 and so on.

Essentially everything that's not so keys.

And that's not validity checks.

This is just a quick way to get the exact the data that we want.

And if I print out that soul data you can see we have here just an object with only the different keys that we want, essentially each one of the days of Mars.

Now, the next thing that I want to do is I want to take this data which is in this really difficult to use format, and I want to just take out the exact pieces of information that we need and save them in a new object.

So if we just check here, you can see as you remember, we had our temperature high and low our wind speed as well as which soul we're on.

So inside here 80.

That's our atmosphere temperature so we could get our minimum, which is mn and our maximum.

So let's make sure that we do that.

And in order to loop through all of this different data, all we need to do is say object dot entries.

This is going to allow us to look through an object which we can pass in our soul data object.

And then we just want to map this which essentially is going to convert one set of information into another set of information.

Make sure this says entries here and this map is going to take in the different properties from our soul.

Data are sold dated when we call entries is going to be an array for the first value is the key, which in our case, is for 51 the second value is everything in the objects.

All the A.

T h w s pre all of that stuff So what we can do is actually just d structure that into our soul, which is the key and our data, which is everything else.

And then we just want to call a function with that information and inside of here, what we want to do is return a new function, which has the information that we want.

So if you remember, we want our soul.

So we're gonna say soul, we want to get our maximum temperature will call it Max temp.

And that is our data 0.80 dot We open this up, we have m X for Max, So we'll say MX here.

We could get our men 10th which is data 0.80 dot m n for our minimum.

Next, we're going to need to be getting our wind speed, which comes from H.

W s.

That stands for horizontal wind speed.

So we can say wind speed.

We're gonna get data dot h W s, and we just want to get the average, which is a vey because we don't have a minimum or maximum showing.

We just show on average value across the entire day.

Next, we need to make sure we get the degrees for our wind because, as you can see, we have this little icon here which shows the direction the wind is blowing.

So we want to get our wind direction in degrees.

This is gonna be data dot w d instead of here.

This is our wind direction, and we have this most common section which is essentially like our average, so we can call most common.

And then we want to get the compass degrees that's going to give us the degrees of our wind.

And also we want to make sure you get this compass point so that will we have a way to tell screen readers.

So people that cannot see this nice icon exactly which direction the wind is going.

So we're gonna do that again, which is just going to be called wind direction Cardinal, which is just saying which direction it's coming from.

You're gonna be data dot w d dot most common.

And this one is the compass point just like that.

That's going to be this South southeast designation right here and then.

Lastly, I want to get the date that this happened because, as you can see here, we're printing out the actual date on Earth as well as the date on Mars.

So we just want to make sure we get that date.

We're gonna call it a date here, and we can just convert this value instead of here, which is the scroll up first UTC.

So we can just convert that first UTC by calling data dot first hoops first UTC and this new date is just gonna convert this string value into an actual date.

We can use with JavaScript and print out to the screen like this.

And with that, what we can do is we can actually just print out what gets returned from this so we can come in here and we can say that we would want to set this to a variable will say attempt because this is just gonna be temporary.

And then down here, we could just cancel that log our tent variable, and if we save, you can see Now we have just a array of objects, and each one has the exact information we want the soul, maximum temperature, wind speed, wind direction, the direction card in ality as Bose, an actual date that we can use with JavaScript.

So in order to use this information instead of just logging it out, let's make sure that we return this from our dot then And we also want to return our promise from get weather And then when we call and get whether it's returning a promise, so we could just say dot then and our value being returned is this array right here that we know is going to be our list of all of our different souls.

So as soon as we're done getting our weather, our souls are gonna be in here and again.

I can just log this out save, and we get the exact same Arabian printed out.

So now this get weather function is essentially done, and the exact data we need is coming into this dot Then portion when we call, get weather.

So now we have the array of all of our different souls exactly where we want it.

And now with that data, by default, I want our latest soul to be displayed.

Here is our main soul section.

So essentially the most recent date I want to display here and our most recent date is just going to be the last soul in our list, so we can have a variable which were just kind of call Selected Soul Index.

This is the one that's currently being displayed in this large overhead section because we have all these other souls down here and we want to display our over our king one up here in this large section so that selected his soul index is just our souls dot length minus one.

This is going to give us the very last index in our array.

And I also want to make this a global variable because we want to be able to access this selected soul index from anywhere in her application socials put our selected soul index up here and then just redefined that value down here.

So now it's a global variable available in any of our different functions.

So now that we have that, I want to be able to display that specific selected soul.

So let's create a function to do that.

We're gonna call this function display selected soul, and this is gonna take in the array of all of our different souls, and we could just call that here display selected soul with all of our souls.

And the first thing I want to get is our selected soul.

And this selected soul is just gonna be equal to our souls array.

We want to get from that selected soul index.

So there's value here in this variable is going to be which ever soul is currently selected or by default is going to be the very last soul.

And we can prove that by just logging it out.

If we inspect over here, you'll see that we have just an individual object, which is the very last soul in our souls of Ray.

So now we can take the information from this, for example, our soul number, our temperatures, wind speed, wind direction and our wind direction card in ality and put all of that information into our HT mountain.

But in order to do that, we need to modify our HTML so that we can select each one of these different sections to place the exact data that we want.

So let's go ahead and do that.

We're gonna open up our index dot html and inside it here we'll scroll down a little bit until we find our section for example, right here where we have our soul being displayed and in order to display a specific soul here instead of always 377.

What I want to do is just delete this 3 77 that shows up by default.