WEBVTT

0
00:00.170 --> 00:02.840
I want to show you something really cool now before we move on.

1
00:02.840 --> 00:08.180
In fact, you can even think of this as a complete 🌟"bonus lecture" 🌟, because what I want to do is I want

2
00:08.180 --> 00:13.760
to show you how we can extract data from the URL and then display it on the page.

3
00:13.760 --> 00:15.140
How cool would that be?

4
00:15.650 --> 00:18.620
And of course, we do this only once the user clicks on submit.

5
00:18.620 --> 00:21.830
It's just quite interesting to know and it's quite fun.

6
00:21.920 --> 00:28.910
But in order to do this, we're going to have to use an interface. 
(WHAT)
You can think of an interface

7
00:28.910 --> 00:34.490
as kind of an object that has a whole lot of properties and methods that we can use, and it's given

8
00:34.490 --> 00:37.460
to us by the web itself, by the browser itself.

9
00:38.070 --> 00:45.360
And the one we're going to be using in order to deal with query strings is called URLSearchParams.

10
00:45.390 --> 00:46.590
That's an interface.

11
00:46.590 --> 00:47.880
It's like an object.

12
00:47.880 --> 00:53.790
And like I mentioned, it just defines methods to work with the query string of a URL.

13
00:54.060 --> 00:57.570
And if we implement the URLSearchParams, we get

14
00:57.570 --> 01:03.030
returned to us an object that we can directly use in a For...Of loop. 

15
01:03.600 --> 01:07.470
Don't worry, I'm going to show you exactly how it works.

16
01:07.470 --> 01:08.130
So here we go.

17
01:08.160 --> 01:12.270
Here's our example we looked at previously in Visual Studio Code and this is our index file.

18
01:12.270 --> 01:13.260
What I want to do

19
01:13.260 --> 01:16.530
and let's just you know you can see my directory here is blank.

20
01:17.040 --> 01:19.320
I've only got one file - an index.html file. 

21
01:19.320 --> 01:21.750
But I want to create another HTML file

22
01:21.750 --> 01:23.880
now. Let's just call it "results.html".

23
01:23.880 --> 01:26.880
And that's where we want to display all of our results.

24
01:26.880 --> 01:30.090
So let's create a very very simple HTML template.

25
01:30.360 --> 01:32.580
Within there we can have a body.

26
01:32.670 --> 01:36.360
Here we can have a div, with ID of results.

27
01:36.570 --> 01:40.020
Right now we can just leave that div blank.

28
01:40.020 --> 01:42.090
We can style it however we want.

29
01:42.090 --> 01:43.950
That's why we can have an ID.

30
01:43.980 --> 01:46.920
We can target it with CSS, style it nicely.

31
01:46.920 --> 01:51.240
But inside this div, that's where I want to display all of our results.

32
01:51.240 --> 01:55.470
So that's another reason why I want the ID there, because I want to target it with JavaScript.

33
01:55.470 --> 02:01.110
Then, just to make our lives easier, why don't we just have an anchor tag and then that can just

34
02:01.110 --> 02:04.470
ref, um, you know, our index.html file. 

35
02:04.650 --> 02:05.550
Very, very simple.

36
02:05.550 --> 02:07.380
And we can say "Back to form". 

37
02:08.850 --> 02:09.210
Okay.

38
02:09.210 --> 02:09.990
How's that?

39
02:10.110 --> 02:13.890
And that's all I want in our HTML.

40
02:14.250 --> 02:16.170
But we need JavaScript, right?

41
02:16.170 --> 02:17.070
We need JavaScript.

42
02:17.070 --> 02:18.420
We need to target that div,

43
02:18.420 --> 02:20.910
we then need to access the URLSearchParams, 

44
02:20.910 --> 02:23.460
and then we need to display all of our results.

45
02:23.460 --> 02:29.430
So the first thing I want to do is I want to define our resultsList [variable], the place where we want to put

46
02:29.430 --> 02:30.540
all of our results.

47
02:30.930 --> 02:38.940
And like I mentioned, I want to target that div with JavaScript - getElementById(), and the ID we're

48
02:38.940 --> 02:41.040
going to target is results.

49
02:42.240 --> 02:47.220
And now this is where we're going to be using the URLSearchParams. 

50
02:47.520 --> 02:52.830
In order to use it, we need to use JavaScript's `new` keyword, and URLSearchParams.

51
02:52.830 --> 02:55.110
We don't have to write this method ourselves.

52
02:55.110 --> 02:59.370
This is purely straight out of the box given to us by the browser.

53
03:00.000 --> 03:04.800
It takes one argument, and that is the URL parameter itself.

54
03:04.800 --> 03:09.330
Because we know when we submit our form with a GET request, everything is going to be appended in the

55
03:09.330 --> 03:09.930
URL.

56
03:09.930 --> 03:13.200
So how do we get to that entire query string?

57
03:13.200 --> 03:16.170
What is the king 👑 of everything on a web page?

58
03:16.170 --> 03:19.710
If you've done my DOM courses, you'll know it is the window object.

59
03:19.710 --> 03:23.250
And on the window object, we've got another property called location.

60
03:23.250 --> 03:30.750
And on that we want to get what's in the search bar, the parameters within that search bar.

61
03:31.320 --> 03:31.800
There we go.

62
03:31.800 --> 03:32.640
So that's pretty much it.

63
03:32.640 --> 03:34.230
But now remember what I said ...

64
03:34.230 --> 03:40.110
we usually use the forEach method or the for...of method to iterate through each one.

65
03:40.110 --> 03:41.850
Here I'm just going to use forEach.

66
03:41.850 --> 03:43.590
And it's very very simple.

67
03:43.590 --> 03:45.870
We're going to take its value and name,

68
03:46.440 --> 03:48.720
and I'm going to be using the arrow syntax

69
03:48.960 --> 03:49.890
and here we go.

70
03:49.890 --> 03:52.620
We can literally display the entire results.

71
03:52.620 --> 03:57.090
So I want to grab our resultsList that we defined above,

72
03:57.450 --> 04:01.050
and I want to append the values.

73
04:01.290 --> 04:03.360
And I'm going to use template literals.

74
04:03.870 --> 04:06.780
If you don't know what these are, please check out my JavaScript course.

75
04:07.640 --> 04:08.000
Right.

76
04:08.000 --> 04:09.470
And we've got variables in here.

77
04:09.470 --> 04:15.470
We've got the name variable, and you guessed it we've got the value variable.

78
04:18.200 --> 04:19.130
There we go.

79
04:19.550 --> 04:25.760
And the other thing I want to do then is, because that's just going to display it all in one line, I

80
04:25.760 --> 04:26.780
want to have a break.

81
04:26.780 --> 04:30.650
So let's get our resultsList, append, 

82
04:30.650 --> 04:32.750
and here I'm going to access our document.

83
04:32.750 --> 04:35.570
And now I want to create an element.

84
04:36.600 --> 04:40.440
And the element I want to create is a "br" - a break.

85
04:41.010 --> 04:43.080
How cool is this?

86
04:43.080 --> 04:47.190
Now, in our index file, all we need to do is define an action.

87
04:47.700 --> 04:50.430
And of course we want to go to the results.html page.

88
04:51.030 --> 04:51.990
Does that make sense?

89
04:56.410 --> 04:57.340
Let's save this.

90
04:57.760 --> 04:58.810
Let's go to our browser.

91
04:58.840 --> 05:01.570
Let's type "Wally", submit.

92
05:02.320 --> 05:04.510
How awesome is this?

93
05:04.840 --> 05:06.400
Man, I have a lot of fun doing this.

94
05:06.400 --> 05:07.510
I hope you do too.

95
05:07.510 --> 05:10.510
And don't take what you've learned for granted.

96
05:10.540 --> 05:13.150
You really are learning a lot.

97
05:13.150 --> 05:19.690
And yeah, I thought this would just be a good place for us to stop, and for me to show you how to extract

98
05:19.690 --> 05:24.550
information from the query string and display it to a screen.

99
05:24.880 --> 05:30.340
And as you just seen, we used the URLSearchParams interface.

100
05:30.340 --> 05:31.870
And it's a very simple interface.

101
05:31.870 --> 05:36.190
It takes one argument and that argument is the URL search parameter itself.

102
05:36.190 --> 05:40.030
Basically all the name:value pairs that are submitted along with the form.

103
05:40.030 --> 05:44.110
And then we just loop through each name:value pair,

104
05:44.260 --> 05:45.220
right Wally, 

105
05:46.030 --> 05:47.020
let's submit.

106
05:47.620 --> 05:52.000
And then each name and value pair is displayed to the screen.

107
05:52.000 --> 05:53.770
We created an empty div tag.

108
05:53.770 --> 05:56.800
And then we just put all our content within that div tag.

109
05:56.800 --> 05:59.800
Very very simple, but very very cool.

110
06:00.040 --> 06:03.490
Anyways, that's enough for this topic, so let's move on.