Kyle here from Web have simplified.

I know, I know you have seen a 1,000,000 weather app tutorials before They're all over the Internet.

But in this weather app tutorial, I'm going to be doing one thing in particular differently, that none of the other tutorials I see do And this could down the road potentially save you a ton of money.

So make sure you don't miss that.

Let's get started now was quick.

Take a look at the application we're going to be building.

First thing you do down here, enter some location that you're interested in.

You'll see we get a list populated to the bottom, and as soon as we find a location that we want, it'll show us the status.

Give us an icon.

His balls are wind, speed, temperature and precipitation, and this also is based on the location here.

So this isn't Fahrenheit and miles per hour because we're in the U.

S.

But if, for example, we decided to go with England and we click here, you see that the temperature is now in Celsius and the wind speed is in kilometers per hour because it's based on the location that you type in.

Now, to get started with this weather, we need to have some A p I to access in order to get both the weather information as well as this location information down here for the different places on Earth.

So to get the weather information, we're going to use the dark sky a p I All you need to do is create a simple account on here.

It's easy and free to do.

And here's all the FBI documentation we need And the important thing you need from here is an A p i ke as well as the documentation on where to call.

Get your a p.

I quit.

You just click on the consulate here.

It'll show you're a pikey.

I'm going to be resetting this after this video so don't actually use this ap ikey.

Make sure to create your own because this will no longer work afterwards.

And the one crucial mistake that most people make is they take this ap I ke and put it directly into their JavaScript on the client side.

And the problem with that is, if we go back to the documentation and scroll down a little ways this a p I if you sign up for a paid account, will actually charge you for the number of requests that you make after a certain amount of free request.

So if you put your A P i p in the Java script itself, then you're gonna be opening yourself up to someone stealing that a p i ke and using it for their own means while charging you fort.

And this is a mistake so many people make.

So in our video, we're gonna make sure that we put our A p i ke inside of the server so that no one has access to it except for us you think we're going to need is we're going to need to use the Google is a P I.

Which is what's populating this little list down here, which is going to be the Google places a p I.

It's quite a bit more difficult to set up, but I'm gonna walk you through all the steps needed when we get to that point.

The first thing we need to do, though, is set up our server using know Js.

So let's open up our visual studio code here in the very first thing that we need to do is type in N p M in it.

And this will allow us to set up our project with a package deal.

Jason, we just hit Enter a bunch of times here to get all the default options, and illiteracy will have an empty package.

Jason here.

Next, we want to install all the different dependencies that we're going to need for this project.

Luckily, since our project is mostly front end facing, we don't have very many dependencies, our main dependencies here that we're going to have.

So it's a m p m I.

We have Axios, which is going to allow us to call the AP eyes that we need.

It works very somewhere to fetch.

Does if you're familiar, that and also we're gonna need express because that will just make setting up our server much easier than if we use the default note.

Http module and also we want a few development dependencies.

So we'll say mpm I dash dash save Dev, These will essentially only be for one we're developing and we want Dottie Envy toe load in our a p i ke as well as node mon toe automatically refresh our server for us.

Now that those air done, let's set up a simple script here in order to run our server.

So what is called us?

Deb Start.

And we're just going to set this to Newman and we'll call it server that Js This is just going to be the file we create that has all of our server code.

So let's create that file now, serve a dodgy s.

Luckily, as I said, this is a really basic experience application.

The first thing we want to do is we want to actually load in our environment parables.

So we're going to check our environment to make sure we're not in production.

And to do that, we could just say that our note environment, a variable is not equal to production.

And if that's the case, we wantto require that Dottie Envy Library that we loaded in for development and all we want to do is call dot config.

This is going to load in everything we put inside of our Dottie envy file.

So let's create that Dottie and B file right now and in here.

We're going to put our A p i ke so we may find that a Paki, Remember, it's on the consul section.

We could just copy to say, Packy and this is the dark sky a p i ke.

So we'll just call it such and set it in there.

And now we have access that a pikey from inside of our server by just calling.

This will say constant dark sky a pikey.

And we're just going to set this equal to our process dot envy, which this is going to populate that variable for us.

And again, we want Dark Sky, a pikey just like that.

Let's expand our browser Lovett and there we go.

Now the next thing we want to do is actually set up our server.

So we're just going to say, Content Express is equal to require express, and we want to set up a trap, which is just going to be the express function being called.

And lastly, we need to set up what we want are apt to use.

This is going to be really basic.

We want to use Jason because we're going to be sending Jason to our server.

So we'll say express Jason and we also want to set up our static folder.

So we're gonna say app that use express Thet IQ and this static is just going to be inside of a public folder.

This is just standard practice to use the public folder here and our a p I is only going to have a single endpoint.

So I'll say apt outpost.

And we want this to be our weather end point.

This is going to get our weather for us from the dark sky, a p i and again like I mentioned, this is where a lot of people mess up.

They actually put this inside of their front end, which means that a P I ke is exposed to anyone that has access to the Java script, which is anyone that knows how to use the developer tools inside of the browser.

It's very unsafe, and we definitely don't want to do that.

Is that if you were going to implement this later, for now, we're just going to leave it blank, and we're going to actually tell her server what to do.

So we're gonna say ap dot listen, tell what the port in our case will just use 3000 and then this is going to return a function here, and this is going to run when the server starts up.

So we'll just say, Consul, that log that the server has started that way.

We just know when things are working and if we save that and we do and PM run, Dev Start, which is that command we created in our package dot Jason, we should see everything start up just fine, and that's perfect.

And now if we go to our local host 3000 you see that we cannot get slash, which is perfect, because we haven't actually set up an end point for our server here at slash.

But we know that our server is actually running right now.

Before we jump any further, I want to set up a dot get ignore file.

And this is for when we're using version control to store stuff we don't accidentally check in our environment variables or a node modules.

So we want to ignore environment variable folder and our Node Modules folder here.

Make sure you put that isn't underscore, and that'll be that we never accidentally check this into our version control because we don't want to expose us anywhere.

As I said, since people can use this to charge us now let's create our public folder here.

This public folder is going to contain all of the different code for our front end.

So the first thing we're going to have is an index dot html.

This will just be our main page.

We're gonna have a Stiles Nazi SS for style in our weather app as well those script dot Js which is just going to run all of the different JavaScript we need.

In order to call the AP, I I want to get started by rendering out our index dot html page.

An easy way to get started with this is type exclamation point enter in visual studio code and it will create the boilerplate code for us.

Next, we're just gonna title this weather app and we also want to include in here our style tag.

So we'll say wink, a trip is going to equal that styles Nazi SS.

And we need to tell the browser that this is a style sheet, so that knows how to actually parse this data.

And lastly, we wanna have a script tag here which the source is just going to be equal.

Script out J s close that off and make sure that we defer.

This is that it's going to load after a pages done rendering now inside of the body here, we can actually do the code for our weather out.

So let's take a look at what we have.

As you can see, we have a container here which contains this header section with an icon as well as the information for our status location in all of the different details of our weather.

And then finally this input down here with our different options for the places.

So the very first thing we're gonna do, because we want to wrap everything inside of the container.

So it's going to give a class here of container Close that off and everything inside of here first thing we're gonna have is our header.

So again, what if she's a dead for this?

Give it a class set that equal the header And the only thing that we needed said of our header is their icon icon is going to be inside of a container again.

What is called this icon container.

That's because we have this nice white circle around it and our icon, we're actually going to be using canvas poor because we're going to be using a library which will importer icons and the library takes canvas icons.

So we're gonna credit canvas, given an idea of icon so we can reference it later.

We're also going to give it a with here of 100 a height, which is going to equal 100.

Close that off and that's all of our header section done.

Next, we wanna work on the content section of our page.

So after a header, what's creating negative?

And this day, if we're just going to give here a class, which is going to say content, I can't type today, apparently, and inside of this content section, we have our general information as well as our details.

So what's credit did for the general information?

We just call it general information, make it nice and straight Ford's that we know what everything is doing, and inside of here we're just going to have to dibs first if it is going to have the class of status and close that off.

And the second did that we're going to want down here is going to be our location.

I don't know the first thing that we notice If we refresh this page, we want our default text so we won't enter a location to be here.

We want to find the weather to be our default text for our location.

And this is just what's going to load as soon as we refresh our page.

We want the same thing down here for all of our different details of our weather.

So now we can go down into our detail section, which is going to be after our general information.

Make sure this is a div with a class of details section.

I really can't type today.

There we go.

Now, instead of this detail section, we're gonna have a bunch of different details and we're just gonna give them a generic class of detail so we can share all of our different styles between these different sections.

And each one of these details is going to have a diff with a class of title just like this.

And our title for the 1st 1 is going to be wind, and then we're also going to have a diff, which is the value.

So we just give it a class here of value, and this is just going to say to be determined as a default value.

Now it's copy this down two more times because we're gonna have three details in total.

And we want this one to be temperature in this next one is going to be a precipitation.

And there we go.

The last thing that we need to do is actually put in our location input.

So to do that would scroll all the way down to the bottom.

Here, we want to put this inside of all of our containers.

Stow.

So let's just put it right here.

We're going to give it a div that is going to be wrapped around.

Just gonna call that our city search container because it's just the container that we're going to put our search bar inside of, and then we need input, which is going to be our texted put.

So we'll make sure it has a type of text here, and we want to give it a class of citysearch.

There we go.

That way we can actually use this and we're just going to give it a placeholder as well.

Which is going to say Enter location?

Because, as you can see here, it has that placeholder text and we'll close that off.

And that's all of the actual code that we need.

And you will notice one thing.

We have a link down here at the bottom that says, Powered by Dark Sky, and this is required to use the dark sky, a p I.

It actually is mentioned in the documentation, so we need to make sure to put that link.

So let's go down at the very bottom of page outside of absolutely everything, even this last container native.