Now that we have our endpoint sorted, we can
now complete the implementation of the weather
feature by connecting our front-end to the
endpoint we just created.
If we take a look at our createDestinationCard,
let's look for it, createDestinationCard,
let's find its definition.
This is the function responsible for building
up the card that displays each destination.
If we just scroll down, we will see that the
checkWeather button which is down here calls
a getWeather function.
This getWeather function takes in the name
of our destination.
And this is the function that is going to
call our API, get the weather results, build
our dialog and display it.
So we need to write this getWeather function.
To help us out, we have a WeatherModal selector,
let's look for WeatherModal.
So we have a WeatherModal selector here, which
is an instance of a Bootstrap modal.
So that is what helps us manage the modal.
We also have a WeatherContent selector, which
controls the content of the WeatherModal.
Another helpful function that we have is displayWeather.
This is the function that does the job of
organizing the weather information in the
weather content container.
As you can see, it gets the weather data,
gets its description, and then builds up the
entire weather display, as we're going to
be seeing soon.
So we have those functions and selectors to
help us out.
And now that we know what we're working with,
we can get started writing our getWeather
function.
Now, if we scroll down, I've also created
a section for our integration.
That is our integration task 3, which is to
implement getWeather.
And now, let us get started with that.
The first thing we're going to do is declare
the function and its arguments.
So we'll say async, because we're going to
be performing asynchronous operations
within this function.
GetWeather, and it simply takes in a destination
argument.
Make sure you spell getWeather correctly as
it's expected in the code.
And now, when this function is called, we
want to display a loading indicator
in the modal that pops up.
So let us build that markup inside
our weatherContentContainer.
I'm simply going to go in here and say
weatherContent.innerHTML.
I'll set it equal to a template string
because we want to build a markup.
We have a div with a class that helps us
center the text.
Let's close that down here.
After that, just inside this
container div.
I'm going to have another div with a class
spinner border text primary.
Now these are bootstrap classes so you don't
need to think hard about them.
They just help
us with some styling to show that this is
a loading indicator.
I'm going to close this
div also.
Now, inside here, I'm going to use a span
tag to display the message.
We have
a loading message here.
close the span tag.
And down here, I'm going to add a paragraph.
it some margin top with bootstrap and say
fetching weather information dot dot dot and
we close the paragraph.
So we have loaded the content that we want
in the modal.
Now let us pop up the modal and like I said,
the weather modal selector has all that we
need to do that.
It's an instance of a bootstrap modal.
then call the show method so that the weather
modal pops up.
So that's good.
Let's proceed.
Now, with that progress indicator on display,
we can then write our request to our backend
endpoint.
Let's start with our traditional tricat block.
Let's just undo the catch section with some
error handling.
I'm just going to say console.error
is display the error.
And down here, I'm going to also write some
weather content markup, an HTML.
Inside here, we'll simply have a div that
shows an alert, let's close that.
And inside that div, we're simply going to
have an icon here.
We'll make it a triangle to show warning.
So I'm just going to give it a class of by,
by, exclamation, triangle.
Like I said, these are bootstrap classes,
so don't think too hard about them.
Just follow what they're trying to do.
And here we'll say error fetching weather
information.
Please try again.
So this will automatically switch whatever
is currently showing in the modal which is
this loading message.
That's if we encounter an error.
Now let us write our request.
Let's go into the try block and start writing
our request.
Here we'll say const response equals await
fetch then we'll point to our backend API
base URL once again.
Now we want to go to the API forward slash
weather endpoint then we can define our request
configuration for fetch.
We'll say the method should be post for headers.
We'll set the content type.
That will be application slash json.
That will be all for the header section.
Now in the body, we'll serialize our data
by calling json.stringify,
and this idea will simply
pass our destination.
That will be the destination that was sent
in.
Good.
Now let's check if the request was successful.
If not, we're going to be displaying an error.
So I'm just going to come down here.
Let's kind of scroll it into view.
And we'll say if notResponse.OK.
That is, if the response shows an error,
we're going to throw an error and say failed
to fetch weather.
Now, if we get to retrieve our data, we would
be displaying it.
So let us write a code that does that.
Let's say, come down here and count data equals
response.json,
need to put a weight here.
And then we can call on that helpful display
weather function to help us display our weather.
So we simply pass it the data and destination.
Perfect.
Now that completes our integration and in
the next video, we'll be testing everything
out to make sure that our application is working
fine by displaying weather conditions for
any selected destination.