1
00:00:00,180 --> 00:00:01,940
In this video as promised.

2
00:00:01,950 --> 00:00:07,370
You're gonna go ahead and create a form that shows up on the home page of the weather Web site that

3
00:00:07,370 --> 00:00:10,570
will give users an input where they can type in their address.

4
00:00:10,590 --> 00:00:16,560
They'll be able to click a search button and then the forecast information will show up after it's fetched

5
00:00:17,040 --> 00:00:18,080
now to kick things off.

6
00:00:18,080 --> 00:00:21,630
We're gonna start over in index dot HB S..

7
00:00:21,690 --> 00:00:28,410
By writing a little HDL we're gonna go through the process of creating our form with the text input

8
00:00:28,500 --> 00:00:30,470
as well as the button.

9
00:00:30,480 --> 00:00:36,720
Now I'm gonna leave the header in place and then the paragraph down below just inside of our main content

10
00:00:36,750 --> 00:00:44,880
div just before we close that we're gonna go ahead and use the form tag to create a form now with form

11
00:00:44,880 --> 00:00:52,200
we create a separate opening and closing tag then inside of there we're going to create the input and

12
00:00:52,320 --> 00:00:58,270
the button let's go ahead and start with the input input is an empty element.

13
00:00:58,270 --> 00:01:03,790
There is no separate closing tag and then down below we have a button.

14
00:01:04,040 --> 00:01:10,500
Button does have a separate opening and closing tag and right inside you put the text for your button.

15
00:01:10,540 --> 00:01:15,950
So in this case I'm gonna go ahead and use search as my button text.

16
00:01:15,970 --> 00:01:19,780
Now if I go ahead and refresh things over in the browser what do we have.

17
00:01:19,780 --> 00:01:25,750
We have our little form showing up from here we could customize the input a little more.

18
00:01:25,810 --> 00:01:27,830
I'm gonna go ahead and add a placeholder.

19
00:01:27,940 --> 00:01:30,450
So we have some text showing up inside of here.

20
00:01:30,490 --> 00:01:35,620
Until you actually type something that's gonna make sure you know what you're supposed to type in there

21
00:01:36,130 --> 00:01:38,740
to do that over inside of index Dot.

22
00:01:38,770 --> 00:01:46,360
HB Yes on input I'm gonna set up the place holder attribute giving it a value equal to whatever I want

23
00:01:46,360 --> 00:01:47,220
to show.

24
00:01:47,230 --> 00:01:50,980
So in this case I could show location as an example.

25
00:01:50,980 --> 00:01:57,460
Now if I was to refresh things I would see that showing up in gray until I actually type something like

26
00:01:57,460 --> 00:01:58,570
my location.

27
00:01:58,570 --> 00:02:00,990
Then that shows up instead.

28
00:02:01,000 --> 00:02:03,520
So now we have a very simple form.

29
00:02:03,550 --> 00:02:06,850
The problem is that if we were to submit it nothing would happen.

30
00:02:06,850 --> 00:02:11,020
It's not wired up with our client side JavaScript code.

31
00:02:11,020 --> 00:02:12,900
So let's go ahead and address that.

32
00:02:12,940 --> 00:02:16,280
We're done with the markup and we're going to move into app dot J.

33
00:02:16,280 --> 00:02:22,840
S and figure out how we can do something when someone clicks that button and submits that form to get

34
00:02:22,840 --> 00:02:23,350
started.

35
00:02:23,350 --> 00:02:29,170
The first thing we need to do is select the element from our h t email documents that we're trying to

36
00:02:29,170 --> 00:02:35,320
work with and we do this using document dot query selector.

37
00:02:35,320 --> 00:02:41,470
Now we pass to this a string and the string inside of here is very similar to the strings we were using

38
00:02:41,470 --> 00:02:45,360
in our CSX file to select the things we wanted to style.

39
00:02:45,430 --> 00:02:51,160
We selected body or we selected something by class footer header and so on.

40
00:02:51,160 --> 00:02:58,570
Now in this case we are trying to select the following our form so we can grab it by its name right

41
00:02:58,570 --> 00:03:01,030
here form and we're done.

42
00:03:01,030 --> 00:03:06,700
Now what comes back from that is a javascript representation of that element and we can use that to

43
00:03:06,700 --> 00:03:11,910
manipulate the element or to do things when a user interacts with the element.

44
00:03:11,920 --> 00:03:20,500
So right here const i can call this whether form just a way to store that variable so I can access it

45
00:03:20,500 --> 00:03:23,230
at any point in the future and down below.

46
00:03:23,230 --> 00:03:29,770
The first thing we want to do is figure out how to run some code when someone submits that form because

47
00:03:29,770 --> 00:03:35,880
that code is gonna be responsible for fetching the weather and getting everything rendered correctly.

48
00:03:35,920 --> 00:03:40,530
To do this we need to add an event listener onto our element.

49
00:03:40,600 --> 00:03:45,670
So there are all sorts of event listeners out there that our event listeners for hovering over something

50
00:03:45,670 --> 00:03:52,480
like the header for scrolling on a page for clicking a button or for submitting a form next to actually

51
00:03:52,480 --> 00:03:53,100
add it.

52
00:03:53,110 --> 00:03:59,440
We use whether form dot add event listener.

53
00:03:59,440 --> 00:04:02,770
Now in this case we need to pass in two arguments.

54
00:04:02,770 --> 00:04:04,110
The first is a string.

55
00:04:04,120 --> 00:04:07,190
The name of the event we're trying to listen for.

56
00:04:07,240 --> 00:04:11,150
As I mentioned there are dozens of different events that are supported.

57
00:04:11,230 --> 00:04:16,940
And the second is a callback function which runs every single time that event occurs.

58
00:04:17,050 --> 00:04:23,830
In our case the name of the event is submit and the function is going to run every single time the form

59
00:04:23,920 --> 00:04:29,460
is submitted and for the moment over going to do is log something to make sure it's working console

60
00:04:29,490 --> 00:04:31,810
dot log testing.

61
00:04:31,810 --> 00:04:37,330
Now if you're interested in learning more about how you can work with elements in client side JavaScript

62
00:04:37,600 --> 00:04:44,170
I cover that in detail in my javascript bootcamp for this course we just need a little client side code

63
00:04:44,170 --> 00:04:47,310
in order to wire up our forms correctly.

64
00:04:47,380 --> 00:04:50,290
Now this is not going to work as expected.

65
00:04:50,380 --> 00:04:55,080
We're going to talk through why we'll make a few changes and we'll get things working.

66
00:04:55,210 --> 00:04:58,680
If I actually refresh the page what are we going to see.

67
00:04:58,690 --> 00:05:00,400
I can see the following error.

68
00:05:00,400 --> 00:05:04,650
Show up cannot read property ad event listener of No.

69
00:05:04,660 --> 00:05:08,880
So that means it can't read a property on weather form.

70
00:05:08,890 --> 00:05:15,000
It's saying that weather form is no which it shouldn't be because I already set up these selector.

71
00:05:15,010 --> 00:05:17,730
The problem has nothing to do with our code.

72
00:05:17,800 --> 00:05:22,110
It has to do with the order in which things are happening in index Dot.

73
00:05:22,130 --> 00:05:28,030
HB Yes we're loading in our script file in the head of the document which means the script is actually

74
00:05:28,030 --> 00:05:33,970
running before everything down below is rendered before the form is even passed.

75
00:05:33,970 --> 00:05:36,160
So what we need to do is fix that.

76
00:05:36,250 --> 00:05:38,950
All we're going to do is take this script.

77
00:05:38,950 --> 00:05:43,930
I'm going to cut it out of its current location in the head and I'm going to bring it to the very bottom

78
00:05:43,930 --> 00:05:44,670
of the body.

79
00:05:44,980 --> 00:05:51,070
So just before that closing tag after the footer I'm going to paste that exact same line in.

80
00:05:51,130 --> 00:05:56,530
Now this isn't going to show anything new in the browser even though it's in body instead.

81
00:05:56,780 --> 00:06:02,150
It's just going to make sure that our script runs after all of the elements are available that will

82
00:06:02,150 --> 00:06:06,950
allow us to actually select the form and set up our submit listener.

83
00:06:06,950 --> 00:06:10,670
If I refresh the browser once again what do I have right here.

84
00:06:10,670 --> 00:06:15,890
I don't have an error which is a great start because we're not seeing that error.

85
00:06:15,890 --> 00:06:22,250
We know that our form event listener must have been set up correctly and hopefully our code runs when

86
00:06:22,250 --> 00:06:25,550
the form is submitted and we see testing print down below.

87
00:06:25,550 --> 00:06:30,670
Now we are going to see testing print but only for about a tenth of a second.

88
00:06:30,920 --> 00:06:32,450
So before you click Search.

89
00:06:32,450 --> 00:06:36,170
Pay attention to what's going to show up right here for you in your browser.

90
00:06:36,170 --> 00:06:37,790
I'm going to click it and I can see that.

91
00:06:37,790 --> 00:06:41,150
Testing showed up and it immediately went away.

92
00:06:41,150 --> 00:06:46,940
What happened is that the browser actually refreshed completely and that means that our message was

93
00:06:46,940 --> 00:06:53,150
cleared so the default behavior of forms is to completely reload the page and that made sense a long

94
00:06:53,150 --> 00:06:57,950
time ago before we had access to good client side JavaScript.

95
00:06:57,950 --> 00:07:03,680
Now though what we're gonna do is use fetch to fetch the data and we'll dynamically add it onto the

96
00:07:03,680 --> 00:07:10,640
fly so we don't need to refresh the page a bunch causing a flash of content or confusing the user.

97
00:07:10,700 --> 00:07:16,370
We'll be able to preserve everything on the page like what they've typed inside of the input.

98
00:07:16,370 --> 00:07:22,520
So if I type in test and I click search I am going to see testing show up the browser refreshes and

99
00:07:22,520 --> 00:07:23,570
everything's reset.

100
00:07:23,600 --> 00:07:25,050
That's not what we want.

101
00:07:25,070 --> 00:07:28,340
We don't want to refresh the page on form submission.

102
00:07:28,340 --> 00:07:32,710
We want to run this javascript code instead to do that.

103
00:07:32,720 --> 00:07:37,690
All we have to do is grab the argument that's provided to our event callback.

104
00:07:37,730 --> 00:07:40,520
It is an event object you could call it event.

105
00:07:40,550 --> 00:07:42,090
I typically call it E.

106
00:07:42,230 --> 00:07:45,200
That's typically what you're going to see around the web.

107
00:07:45,350 --> 00:07:47,870
And then we use a single method on it.

108
00:07:47,870 --> 00:07:56,450
It's the only method we're ever gonna use on this event object it is e dot prevent default prevent default

109
00:07:56,480 --> 00:08:02,600
is going to prevent that default behavior which is to refresh the browser allowing the server to render

110
00:08:02,600 --> 00:08:08,690
a new page and instead it's going to do nothing it's just going to allow us to do whatever we want by

111
00:08:08,780 --> 00:08:10,960
letting the function run.

112
00:08:10,960 --> 00:08:16,010
So with our code change in place and the file saved we can refresh the browser.

113
00:08:16,010 --> 00:08:18,870
I'm gonna type in something like my location.

114
00:08:19,130 --> 00:08:24,910
I'm gonna click that search button and what happens I see testing print down below which is great.

115
00:08:25,010 --> 00:08:30,410
And the browser isn't refreshed so by setting this up we've told the browser that we're gonna handle

116
00:08:30,440 --> 00:08:31,270
everything.

117
00:08:31,340 --> 00:08:34,340
It doesn't need to do what it usually does.

118
00:08:34,400 --> 00:08:36,590
Now currently we're not handling everything.

119
00:08:36,590 --> 00:08:42,890
We're just logging testing but now we're in a good position to get the address the user provided and

120
00:08:42,890 --> 00:08:46,400
then use that address to fetch the forecast.

121
00:08:46,400 --> 00:08:50,640
Now it's time to go ahead and grab the value the user typed in the input.

122
00:08:50,660 --> 00:08:53,750
And once again we are going to select the input.

123
00:08:53,750 --> 00:08:56,790
Then we're gonna use various code to manipulate it.

124
00:08:56,840 --> 00:09:03,020
Let's go ahead and start by selecting it so we can actually use it in JavaScript const search or any

125
00:09:03,020 --> 00:09:06,200
other variable name would work like search element.

126
00:09:06,200 --> 00:09:13,830
As an example and we are going to get the value from once again using document dot query selector.

127
00:09:13,830 --> 00:09:18,420
We're gonna go ahead and find the element by its name input.

128
00:09:18,420 --> 00:09:19,410
Perfect.

129
00:09:19,410 --> 00:09:26,040
Now we have access to search and we can extract its value right here after the user submits the form.

130
00:09:26,190 --> 00:09:32,040
So they type of value in they submit the form we get the value and we use it to fetch the forecast for

131
00:09:32,040 --> 00:09:40,020
that location right here to get the value we will create a location variable and it's accessible on

132
00:09:40,080 --> 00:09:46,560
search which is an representation of our input and that is search dot value.

133
00:09:46,740 --> 00:09:53,250
So value extracts the input value which is whatever is typed in and here we're just storing it in the

134
00:09:53,250 --> 00:09:54,270
variable.

135
00:09:54,270 --> 00:09:58,080
Now let's go ahead and log that as opposed to logging testing.

136
00:09:58,080 --> 00:10:03,810
So right here we're going to grab the input text value and we're gonna dump it to the console when the

137
00:10:03,810 --> 00:10:05,610
form is submitted.

138
00:10:05,610 --> 00:10:09,820
I'm gonna save app dot J S I'm going to refresh the browser.

139
00:10:09,960 --> 00:10:11,960
I'll go ahead and type something in.

140
00:10:12,030 --> 00:10:17,460
Let's go ahead and use Austin I'll hit enter or click the Search button and I can see my results down

141
00:10:17,460 --> 00:10:18,130
below.

142
00:10:18,300 --> 00:10:20,270
I'll switch that up to something else.

143
00:10:20,370 --> 00:10:27,520
I'll go ahead and use Portland I'll click the Search button and once again the text provided shows up

144
00:10:27,610 --> 00:10:29,170
right down below.

145
00:10:29,170 --> 00:10:34,100
So now we have our form in place and we're actually getting the text when it's submitted.

146
00:10:34,150 --> 00:10:40,060
From here we're going to use that text to generate the you are well that will pass to fetch.

147
00:10:40,060 --> 00:10:42,920
That's actually going to be your challenge for the video.

148
00:10:42,970 --> 00:10:45,110
So let's talk about what I'd like you to do.

149
00:10:45,160 --> 00:10:46,960
Right down below right here.

150
00:10:46,960 --> 00:10:50,860
Your goal is to use the input value to get the weather.

151
00:10:50,950 --> 00:10:56,620
Now for the moment we're going to continue to just log things to the console like the forecast or the

152
00:10:56,620 --> 00:10:57,260
error.

153
00:10:57,280 --> 00:10:58,030
That's OK.

154
00:10:58,030 --> 00:11:02,080
We'll wrap up the user interface in the next video for you.

155
00:11:02,080 --> 00:11:06,370
You want to one migrate the fetch call into the submit callback.

156
00:11:06,400 --> 00:11:12,940
So right now that runs even if no one ever submits the form we want all of this code to live right here

157
00:11:13,000 --> 00:11:14,530
inside of the callback.

158
00:11:14,560 --> 00:11:17,310
So it only runs when the form is submitted.

159
00:11:17,320 --> 00:11:25,210
Next up you want to use the search input text value as the value for the address query string so whatever

160
00:11:25,210 --> 00:11:29,620
someone types in here needs to end up right here in the U.R.L..

161
00:11:29,680 --> 00:11:36,070
So we want a dynamic U.R.L. where we use the form input as the address query string value.

162
00:11:36,070 --> 00:11:38,610
Next up you're gonna go ahead and test your work.

163
00:11:38,620 --> 00:11:44,560
You can submit the form with no value inside and when you do that you should see.

164
00:11:44,560 --> 00:11:46,960
You must enter an address down below.

165
00:11:47,080 --> 00:11:51,520
You can try something invalid and when you submit that you should see what we have right here.

166
00:11:51,520 --> 00:11:57,850
Unable to find a location then you can try something valid and when you submit that you should see the

167
00:11:57,970 --> 00:12:01,120
location and the forecast printing in the terminal.

168
00:12:01,120 --> 00:12:04,000
Don't worry about trying to print things to HDL.

169
00:12:04,060 --> 00:12:06,050
We'll cover that in the next video.

170
00:12:06,220 --> 00:12:15,290
So take some time to knock that out test your work and when you're done come back and click play.

171
00:12:15,300 --> 00:12:16,220
How would you do.

172
00:12:16,220 --> 00:12:20,900
Let's kick things off by migrating the fetch call into the submit callback.

173
00:12:20,900 --> 00:12:26,060
Right now it's getting called even if no one ever submits the form I'm going to cut it out of its current

174
00:12:26,060 --> 00:12:26,840
location.

175
00:12:26,990 --> 00:12:31,550
I'll remove those extra empty lines and we're gonna bring it in down below.

176
00:12:31,550 --> 00:12:36,360
We're gonna remove that console dialog and paste the fetch code right in.

177
00:12:36,500 --> 00:12:41,120
Now we're only ever fetching when the form is submitted in its current state.

178
00:12:41,120 --> 00:12:46,190
The problem is that we're always fetching the following address which is invalid.

179
00:12:46,190 --> 00:12:51,360
We're not using the value the user types in which we have in that location variable.

180
00:12:51,590 --> 00:12:55,240
So for Step Two you needed to make sure to fix that right here.

181
00:12:55,370 --> 00:13:01,880
I'm going to remove the hardcoded address value and I'll just can cat in on using the plus operator

182
00:13:02,060 --> 00:13:04,450
whatever value is stored in location.

183
00:13:04,460 --> 00:13:05,420
Maybe it's nothing.

184
00:13:05,420 --> 00:13:06,340
Maybe it's valid.

185
00:13:06,350 --> 00:13:07,930
Or maybe it's invalid.

186
00:13:07,940 --> 00:13:08,930
I don't care.

187
00:13:08,930 --> 00:13:14,150
I'm going to pass it through to the API and the API will determine if they could do anything with it

188
00:13:14,330 --> 00:13:15,390
or not.

189
00:13:15,410 --> 00:13:18,470
Now we can save app dot J S and down below.

190
00:13:18,470 --> 00:13:21,260
Step 3 we can test our work.

191
00:13:21,260 --> 00:13:25,930
I'm going to remove the challenge comments I'm gonna make sure that I do save my file.

192
00:13:25,960 --> 00:13:30,200
So the latest code is running I'll refresh things in the browser.

193
00:13:30,290 --> 00:13:31,130
And what do I have.

194
00:13:31,130 --> 00:13:32,600
I have my page.

195
00:13:32,660 --> 00:13:34,760
I'm gonna start by searching for nothing.

196
00:13:34,790 --> 00:13:37,900
When I do that I get you must provide an address.

197
00:13:37,940 --> 00:13:41,820
From there I'll search for something invalid like the exclamation mark.

198
00:13:41,930 --> 00:13:43,820
I get unable to find a location.

199
00:13:43,820 --> 00:13:45,150
Try another search.

200
00:13:45,200 --> 00:13:48,560
After that I'll search for a valid zip code.

201
00:13:48,560 --> 00:13:55,790
That's my zip code and when I do I get the location and I get the forecast printing in the terminal.

202
00:13:55,790 --> 00:13:57,110
Now we're not quite done yet.

203
00:13:57,170 --> 00:14:02,990
Everything is still printing in the terminal though we do have the important stuff all wired up in the

204
00:14:02,990 --> 00:14:03,700
next video.

205
00:14:03,710 --> 00:14:10,340
We're going to wrap up the weather application by getting a few styles in place and getting the location

206
00:14:10,520 --> 00:14:14,680
forecast and error messages printing to the user interface.

207
00:14:14,690 --> 00:14:18,100
I'm excited to get to that let's jump right in to the next one.