All right then so now let's take all the principles we've learned about Object Oriented JavaScript in
this chapter and apply them to the weather app project.
So I'm going to open this up and then go to index.
Then right click and go to open with live server so we can see that project now in the browser.
Now there's absolutely nothing wrong with this project all the way we've coded it everything worked
and we wouldn't need to change if we didn't want to.
However since we've just covered object oriented programming in classes I wouldn't take that and use
classes inside this project.
So what I'm gonna do is go over to script and then forecast dot J.S. and now all of this stuff is responsible
for going out and making API calls.
So I want to take all of this stuff and bundle it together in one single class were encapsulating everything
to do with a forecast in that class then.
So let's start by saying class and creating one called forecast and then inside this class the first
thing we need is a constructor.
So let's create that.
Now in this constructor I want to define three properties on our forecast objects.
The first one is going to be the key which is this thing right here.
The second one is going to be the base whether you are right which is this and the third one the base
city you are right which is this.
So let's define those.
First of all I'll say this dot K is going to be equal to this thing right here.
So let's grab that and paste it in and then the next thing is going to be this dot whether you are I
which is going to be equal to this thing right here.
So let's copy and paste it in and then the next thing is going to be this dot city.
Woops in capitals this dot city you are I and set that equal to this thing which is down here.
So let's copy all of that and paste it up here.
Now I don't need to take in any parameters into this constructor because they're not going to have any
unique properties when we create a new forecast.
They're all going to use the same properties.
So that's our construct are pretty much done.
Now the next thing I want to do is bundle these functions into that class as methods.
But not only these two functions.
I also want to bundle in this function as well.
Update city because I still think that is kind of to do with the forecast.
So all of these three functions are going to become methods inside the forecast class.
So I'm going to start off with this one update city and what I'm gonna do is come down here and create
this method called update city and ultimately remember this is the first method we call down here when
we update the city we call update city first and we pass in a city so over in forecast let's create
this method and take in that city and inside this method we basically want to do exactly the same thing
as inside the update city over here.
So this is going to be an asynchronous method.
Now over here when we created this method we have not said this is a synchronous and in a class to do
that all we do is pop the async keyword in front of the method name.
OK.
So inside it we need to grab all of this stuff which we do over here.
I'm going to cut that and I'm going to paste it inside this function.
So what we're doing.
Well first of all we're getting the city details and we're calling get city now instead of get city
we're gonna define get city on here so it will be ultimately this don't get city because then we're
referring to the get city method on this class and the same for this.
It's going to be this dot get weather.
So we take in the city and we're trying to call these two methods get city by person in the city and
then get weather by passing in the city details on the key.
Then finally we're returning this thing over here.
So now what we need to do instead of defining the get weather down here and the city down here is defined
them up here.
So we can get city first.
So let's do that first.
This is another asynchronous method.
So we'll do that first of all.
Then say get city.
So now this is a function when we call this it's going to run this method.
So inside this we need to take as a parameter that city which we pass it.
So we'll take in here and inside this method we need to still do most of this stuff down here.
We need all of this.
So we'll grab that.
I'm going to cut it and I'm going to paste it up here and get city so paste that in and scoop this little
bit along.
And first of all we don't need to redefine base because now we have that in city.
You are right.
So let's get rid of this line first of all.
We still need our query and that is still going to be the key.
But this time it's this dot key because that's here now.
And city is still city which we take into the method.
So that can stay the same so let's get the response up that is a wait fetch and then we're concatenate
in base plus query.
Now it's no longer called base.
It's called City.
You are right.
All this dot city you are right.
So let's add that in there.
This dot city you are I plus the query which is this thing.
And now we're making a request to that using fetch.
So this is all the same as before we're just basically changing the variable names.
Then when we get the response we get the data and awaiting response.
Dot Jason.
So now we have that data being returned at the bottom.
OK.
So now we get city and we're getting the city details which are returned to us right there.
Now we call this dot get weather and we pass in those city details which is the key in fact.
So now let's create get weather on this class as well.
So again it's an asynchronous method.
So async and then is called Get Weather and inside here we need to pass the I.D. which is this thing
right here.
So once we're inside this function again we're pretty much doing the same thing as down here.
So let's now grab all of this and paste it up here instead scoot this in a little bit.
And again we don't need the base because we've already defined that up here at the top.
It's now this dot whether you are right.
The query is still going to be the idea right here.
The key is now this dot key because again we stored it up here and the response is now going to be this
dot whether you are instead of the base plus the query right here.
So that's exactly the same now.
And this is going to fetch that data store in response then we're calling response dot Jason to get
the Jason data.
And then finally we're returning that data.
So that is all fine now.
So now we can delete these empty functions and the key and now we have everything stored inside this
forecast class and it should all work the same way.
So let me save that we still need to update the way we call these functions.
Now over here in update yes the first thing we need to do is create a new instance of the forecast plus.
So let me go over here and at the top I'm going to say const forecast is equal to a new forecast object.
So we're calling the constructor inside here and we're setting up that new object with these properties
and these methods on it.
Now the first thing I'm going to do is actually just comment all of this stuff out so it doesn't interfere
with anything.
And I'm going to log this forecast object to the console so console dot log forecast just so we can
see this to say that and inspect over here and got to console and we can see this forecast object now.
And if we open that up we can see these properties and in the proto we can see all the methods get city
and we can see get weather and update city.
So now we can use this forecast object inside this file so let me just undo a couple of steps what I've
done.
Because we don't want to comment all of this out anymore.
And now whenever we call a method like booked a city we need to actually call it on this thing right
here the forecast.
So down here we'll start at the start.
We add an event listener.
We listen for this summit event.
We prevent the default.
We get the city from the input field.
Then we're calling updates city.
But this is now stored on the forecast.
So we say forecast which is the instance of forecast we just created dots update city.
So now that's calling the method update city over here and it's passing in the city.
A user typed into the input field.
So that's really all we need to do because we're not calling any of the other methods get city or get
weather from anywhere inside this file.
All we're doing now is calling update UI which is still up here.
Update UI that isn't on the class because it's not really to deal with the weather.
Now I want to get rid of this function here because we don't need this anymore.
It's stored on the class.
So let me get rid of that.
Let me just make sure that's it.
We have to say down here as well forecast dots update city.
This is checking the local storage remember but we're still calling update city here and that is pretty
much it because once we call that method it sparks the chain of calling this don't get city and this
don't get weather and then ultimately it returns this object and that is the object that we're then
putting into update UI over here.
So now we're getting that back.
We're putting the data in here and everything should work the same as say that was still cross your
fingers and hope that this works.
So let me now change this to something like London and presenter and this works.
Let me try new york presenter and we get this over here.
So this works as well.
So all we've done again is taken all of those separate functions.
Anything to do with updating the city or the weather.
And we've bundled those together as asynchronous methods inside a forecast class.
And we also have a constructor to set the properties on that plus then we create a new instance of that
class with those properties and those methods attached to it.
And down here we're just changing the call to update City which was originally a function in this file
to forecast which is the forecast class instance dots update city and then passing in the city.
And that is sparking the chain of different methods.
So there we go my friends that is object oriented JavaScript in practice.
Now we will be doing another couple of projects later in the course and they will both incorporate this
kind of methodology as well.
So it's not gonna be your only practice with classes but hopefully that gives you a better understanding
now of how they work in a real project.