1
00:00:00,220 --> 00:00:02,660
Now that we have our endpoint sorted, we can

2
00:00:02,660 --> 00:00:04,480
now complete the implementation of the weather

3
00:00:04,480 --> 00:00:06,920
feature by connecting our front-end to the

4
00:00:06,920 --> 00:00:08,700
endpoint we just created.

5
00:00:08,700 --> 00:00:12,260
If we take a look at our createDestinationCard,

6
00:00:12,260 --> 00:00:18,840
let's look for it, createDestinationCard,

7
00:00:18,840 --> 00:00:22,460
let's find its definition.

8
00:00:22,460 --> 00:00:24,800
This is the function responsible for building

9
00:00:24,800 --> 00:00:27,660
up the card that displays each destination.

10
00:00:27,660 --> 00:00:30,820
If we just scroll down, we will see that the

11
00:00:30,820 --> 00:00:33,520
checkWeather button which is down here calls

12
00:00:33,520 --> 00:00:35,260
a getWeather function.

13
00:00:35,260 --> 00:00:37,920
This getWeather function takes in the name

14
00:00:37,920 --> 00:00:39,420
of our destination.

15
00:00:39,420 --> 00:00:40,980
And this is the function that is going to

16
00:00:40,980 --> 00:00:44,680
call our API, get the weather results, build

17
00:00:44,680 --> 00:00:47,580
our dialog and display it.

18
00:00:47,580 --> 00:00:51,980
So we need to write this getWeather function.

19
00:00:51,980 --> 00:00:56,200
To help us out, we have a WeatherModal selector,

20
00:00:56,200 --> 00:01:00,280
let's look for WeatherModal.

21
00:01:00,280 --> 00:01:03,080
So we have a WeatherModal selector here, which

22
00:01:03,080 --> 00:01:05,120
is an instance of a Bootstrap modal.

23
00:01:05,120 --> 00:01:08,100
So that is what helps us manage the modal.

24
00:01:08,100 --> 00:01:15,300
We also have a WeatherContent selector, which

25
00:01:15,300 --> 00:01:19,140
controls the content of the WeatherModal.

26
00:01:19,140 --> 00:01:23,260
Another helpful function that we have is displayWeather.

27
00:01:23,260 --> 00:01:25,020
This is the function that does the job of

28
00:01:25,020 --> 00:01:27,380
organizing the weather information in the

29
00:01:27,380 --> 00:01:29,300
weather content container.

30
00:01:29,300 --> 00:01:31,900
As you can see, it gets the weather data,

31
00:01:31,900 --> 00:01:35,300
gets its description, and then builds up the

32
00:01:35,300 --> 00:01:38,120
entire weather display, as we're going to

33
00:01:38,120 --> 00:01:39,480
be seeing soon.

34
00:01:39,480 --> 00:01:41,720
So we have those functions and selectors to

35
00:01:41,720 --> 00:01:42,660
help us out.

36
00:01:42,660 --> 00:01:44,400
And now that we know what we're working with,

37
00:01:44,400 --> 00:01:46,680
we can get started writing our getWeather

38
00:01:46,680 --> 00:01:47,560
function.

39
00:01:47,560 --> 00:01:49,440
Now, if we scroll down, I've also created

40
00:01:49,440 --> 00:01:51,880
a section for our integration.

41
00:01:51,880 --> 00:01:53,700
That is our integration task 3, which is to

42
00:01:53,700 --> 00:01:55,420
implement getWeather.

43
00:01:55,420 --> 00:01:58,780
And now, let us get started with that.

44
00:01:58,780 --> 00:02:00,140
The first thing we're going to do is declare

45
00:02:00,140 --> 00:02:03,940
the function and its arguments.

46
00:02:03,940 --> 00:02:05,820
So we'll say async, because we're going to

47
00:02:05,820 --> 00:02:07,280
be performing asynchronous operations

48
00:02:07,280 --> 00:02:09,139
within this function.

49
00:02:09,139 --> 00:02:12,800
GetWeather, and it simply takes in a destination

50
00:02:12,800 --> 00:02:15,780
argument.

51
00:02:15,780 --> 00:02:17,720
Make sure you spell getWeather correctly as

52
00:02:17,720 --> 00:02:20,120
it's expected in the code.

53
00:02:20,120 --> 00:02:23,400
And now, when this function is called, we

54
00:02:23,400 --> 00:02:25,620
want to display a loading indicator

55
00:02:25,620 --> 00:02:27,400
in the modal that pops up.

56
00:02:27,400 --> 00:02:30,520
So let us build that markup inside

57
00:02:30,520 --> 00:02:32,360
our weatherContentContainer.

58
00:02:32,360 --> 00:02:40,700
I'm simply going to go in here and say

59
00:02:40,700 --> 00:02:41,220
weatherContent.innerHTML.

60
00:02:41,220 --> 00:02:43,060
I'll set it equal to a template string

61
00:02:43,060 --> 00:02:46,900
because we want to build a markup.

62
00:02:46,900 --> 00:02:50,600
We have a div with a class that helps us

63
00:02:50,600 --> 00:02:54,780
center the text.

64
00:02:54,780 --> 00:02:57,920
Let's close that down here.

65
00:02:57,920 --> 00:03:00,060
After that, just inside this

66
00:03:00,060 --> 00:03:01,180
container div.

67
00:03:01,180 --> 00:03:03,620
I'm going to have another div with a class

68
00:03:03,620 --> 00:03:13,120
spinner border text primary.

69
00:03:13,120 --> 00:03:14,880
Now these are bootstrap classes so you don't

70
00:03:14,880 --> 00:03:16,800
need to think hard about them.

71
00:03:16,800 --> 00:03:17,640
They just help

72
00:03:17,640 --> 00:03:21,320
us with some styling to show that this is

73
00:03:21,320 --> 00:03:23,100
a loading indicator.

74
00:03:23,100 --> 00:03:24,060
I'm going to close this

75
00:03:24,060 --> 00:03:26,640
div also.

76
00:03:26,640 --> 00:03:29,340
Now, inside here, I'm going to use a span

77
00:03:29,340 --> 00:03:32,980
tag to display the message.

78
00:03:32,980 --> 00:03:33,580
We have

79
00:03:33,580 --> 00:03:36,720
a loading message here.

80
00:03:36,720 --> 00:03:39,840
close the span tag.

81
00:03:39,840 --> 00:03:45,580
And down here, I'm going to add a paragraph.

82
00:03:45,580 --> 00:03:50,880
it some margin top with bootstrap and say

83
00:03:50,880 --> 00:03:58,880
fetching weather information dot dot dot and

84
00:03:58,880 --> 00:04:01,080
we close the paragraph.

85
00:04:01,080 --> 00:04:03,020
So we have loaded the content that we want

86
00:04:03,020 --> 00:04:04,240
in the modal.

87
00:04:04,240 --> 00:04:07,020
Now let us pop up the modal and like I said,

88
00:04:07,020 --> 00:04:09,220
the weather modal selector has all that we

89
00:04:09,220 --> 00:04:10,100
need to do that.

90
00:04:10,100 --> 00:04:13,020
It's an instance of a bootstrap modal.

91
00:04:13,020 --> 00:04:14,900
then call the show method so that the weather

92
00:04:14,900 --> 00:04:16,940
modal pops up.

93
00:04:16,940 --> 00:04:18,220
So that's good.

94
00:04:18,220 --> 00:04:19,120
Let's proceed.

95
00:04:19,120 --> 00:04:21,260
Now, with that progress indicator on display,

96
00:04:21,260 --> 00:04:23,160
we can then write our request to our backend

97
00:04:23,160 --> 00:04:24,220
endpoint.

98
00:04:24,220 --> 00:04:27,780
Let's start with our traditional tricat block.

99
00:04:27,780 --> 00:04:30,260
Let's just undo the catch section with some

100
00:04:30,260 --> 00:04:30,980
error handling.

101
00:04:30,980 --> 00:04:33,020
I'm just going to say console.error

102
00:04:33,020 --> 00:04:39,500
is display the error.

103
00:04:39,500 --> 00:04:42,100
And down here, I'm going to also write some

104
00:04:42,100 --> 00:04:50,600
weather content markup, an HTML.

105
00:04:50,600 --> 00:04:55,260
Inside here, we'll simply have a div that

106
00:04:55,260 --> 00:05:02,460
shows an alert, let's close that.

107
00:05:02,460 --> 00:05:04,020
And inside that div, we're simply going to

108
00:05:04,020 --> 00:05:10,260
have an icon here.

109
00:05:10,260 --> 00:05:14,580
We'll make it a triangle to show warning.

110
00:05:14,580 --> 00:05:16,440
So I'm just going to give it a class of by,

111
00:05:16,440 --> 00:05:22,940
by, exclamation, triangle.

112
00:05:22,940 --> 00:05:24,880
Like I said, these are bootstrap classes,

113
00:05:24,880 --> 00:05:26,820
so don't think too hard about them.

114
00:05:26,820 --> 00:05:28,620
Just follow what they're trying to do.

115
00:05:28,620 --> 00:05:33,240
And here we'll say error fetching weather

116
00:05:33,240 --> 00:05:36,760
information.

117
00:05:36,760 --> 00:05:40,260
Please try again.

118
00:05:40,260 --> 00:05:42,360
So this will automatically switch whatever

119
00:05:42,360 --> 00:05:45,280
is currently showing in the modal which is

120
00:05:45,280 --> 00:05:46,280
this loading message.

121
00:05:46,280 --> 00:05:48,240
That's if we encounter an error.

122
00:05:48,240 --> 00:05:49,700
Now let us write our request.

123
00:05:49,700 --> 00:05:51,800
Let's go into the try block and start writing

124
00:05:51,800 --> 00:05:53,780
our request.

125
00:05:53,780 --> 00:05:58,800
Here we'll say const response equals await

126
00:05:58,800 --> 00:06:07,460
fetch then we'll point to our backend API

127
00:06:07,460 --> 00:06:11,040
base URL once again.

128
00:06:11,040 --> 00:06:13,440
Now we want to go to the API forward slash

129
00:06:13,440 --> 00:06:17,920
weather endpoint then we can define our request

130
00:06:17,920 --> 00:06:20,820
configuration for fetch.

131
00:06:20,820 --> 00:06:29,760
We'll say the method should be post for headers.

132
00:06:29,760 --> 00:06:35,480
We'll set the content type.

133
00:06:35,480 --> 00:06:40,060
That will be application slash json.

134
00:06:40,060 --> 00:06:41,700
That will be all for the header section.

135
00:06:41,700 --> 00:06:46,900
Now in the body, we'll serialize our data

136
00:06:46,900 --> 00:06:49,580
by calling json.stringify,

137
00:06:49,580 --> 00:06:52,540
and this idea will simply

138
00:06:52,540 --> 00:06:55,480
pass our destination.

139
00:06:55,480 --> 00:06:59,820
That will be the destination that was sent

140
00:06:59,820 --> 00:07:01,300
in.

141
00:07:01,300 --> 00:07:02,000
Good.

142
00:07:02,000 --> 00:07:04,620
Now let's check if the request was successful.

143
00:07:04,620 --> 00:07:06,860
If not, we're going to be displaying an error.

144
00:07:06,860 --> 00:07:09,520
So I'm just going to come down here.

145
00:07:09,520 --> 00:07:12,620
Let's kind of scroll it into view.

146
00:07:12,620 --> 00:07:17,780
And we'll say if notResponse.OK.

147
00:07:17,780 --> 00:07:22,480
That is, if the response shows an error,

148
00:07:22,480 --> 00:07:27,340
we're going to throw an error and say failed

149
00:07:27,340 --> 00:07:31,760
to fetch weather.

150
00:07:31,760 --> 00:07:35,140
Now, if we get to retrieve our data, we would

151
00:07:35,140 --> 00:07:36,100
be displaying it.

152
00:07:36,100 --> 00:07:38,540
So let us write a code that does that.

153
00:07:38,540 --> 00:07:43,700
Let's say, come down here and count data equals

154
00:07:43,700 --> 00:07:48,440
response.json,

155
00:07:48,440 --> 00:07:52,140
need to put a weight here.

156
00:07:52,140 --> 00:07:55,360
And then we can call on that helpful display

157
00:07:55,360 --> 00:08:00,220
weather function to help us display our weather.

158
00:08:00,220 --> 00:08:05,980
So we simply pass it the data and destination.

159
00:08:05,980 --> 00:08:07,580
Perfect.

160
00:08:07,580 --> 00:08:11,560
Now that completes our integration and in

161
00:08:11,560 --> 00:08:13,540
the next video, we'll be testing everything

162
00:08:13,540 --> 00:08:16,260
out to make sure that our application is working

163
00:08:16,260 --> 00:08:19,440
fine by displaying weather conditions for

164
00:08:19,440 --> 00:08:21,000
any selected destination.