WEBVTT

1
00:00:00.370 --> 00:00:03.380
Our users can add names to the list,
remove them,

2
00:00:03.380 --> 00:00:06.080
check them off when they responded,
and edit them.

3
00:00:06.080 --> 00:00:09.460
Now let's give users a way
to filter the guest list, so

4
00:00:09.460 --> 00:00:12.635
they can see everyone who
has responded at a glance.

5
00:00:12.635 --> 00:00:17.170
We'll create a checkbox above the list
to toggle this feature on and off.

6
00:00:17.170 --> 00:00:21.709
When the box is checked, we'll hide
the guests who haven't yet responded and

7
00:00:21.709 --> 00:00:23.447
display only those who have.

8
00:00:23.447 --> 00:00:27.610
And when the box is unchecked,
all invitees will be visible in the list.

9
00:00:29.020 --> 00:00:33.265
So first, let's add a checkbox to
the page, but rather than editing

10
00:00:33.265 --> 00:00:38.800
index.html, let's add a checkbox and
its behavior with JavaScript.

11
00:00:38.800 --> 00:00:40.160
Apart from a checkbox,

12
00:00:40.160 --> 00:00:44.410
we'll want to add a label to let
users know what the checkbox is for.

13
00:00:44.410 --> 00:00:46.610
And we can do this with a label element.

14
00:00:46.610 --> 00:00:51.160
We'll place the label and checkbox in
a div and append that to the page.

15
00:00:51.160 --> 00:00:56.670
So to plan where we want to put the div
let's take a look at index.HTML.

16
00:00:56.670 --> 00:00:58.210
And looking at the code,

17
00:00:58.210 --> 00:01:02.970
it looks like the best place to add
the div is just before the UL element.

18
00:01:04.580 --> 00:01:06.746
So let's go into app.js.

19
00:01:06.746 --> 00:01:11.853
And at the top create the three elements

20
00:01:11.853 --> 00:01:16.649
we want to use we'll create the div,

21
00:01:16.649 --> 00:01:23.924
first with const div =
document.createElement div,

22
00:01:23.924 --> 00:01:27.965
then we'll create the label.

23
00:01:27.965 --> 00:01:29.495
Let's call it filterLabel.

24
00:01:40.467 --> 00:01:43.349
And we'll create the checkbox.

25
00:01:43.349 --> 00:01:45.301
We'll call this one filterCheckbox.

26
00:01:58.691 --> 00:02:03.256
Next under this we want to set
the labels text content to hide those

27
00:02:03.256 --> 00:02:05.700
who haven't responded.

28
00:02:05.700 --> 00:02:08.970
So we'll type filterLabel.textContent.

29
00:02:11.810 --> 00:02:14.940
And since this string
has an apostrophe in it.

30
00:02:14.940 --> 00:02:18.540
I'll switch over to using double quotes so
inside the quotes.

31
00:02:18.540 --> 00:02:21.320
I'll type hide those
who haven't responded.

32
00:02:25.570 --> 00:02:30.254
And now we'll set the input's
type to checkbox with

33
00:02:30.254 --> 00:02:33.671
filterCheckBox.type = checkbox,

34
00:02:37.035 --> 00:02:42.102
And then we'll append the two elements
the label and checkbox to the div.

35
00:02:42.102 --> 00:02:47.402
So first we'll say
div.appendChild filterLabel.

36
00:02:51.391 --> 00:02:54.720
Then div.appendChild Filter checkbox.

37
00:02:58.280 --> 00:03:04.660
Next, to insert this new div above the UL,
we'll need to call insert before

38
00:03:04.660 --> 00:03:10.520
on the parent of the UL which
is the div with the class main.

39
00:03:10.520 --> 00:03:13.510
Now we don't have a reference
to the main development yet.

40
00:03:13.510 --> 00:03:14.290
So let's select it.

41
00:03:15.530 --> 00:03:19.510
Now the main div sits
under the form in the DOM.

42
00:03:19.510 --> 00:03:23.968
So I'll place it below the form and
above the UL.

43
00:03:38.807 --> 00:03:44.377
And now we can insert the div we built

44
00:03:44.377 --> 00:03:51.256
into the DOM with mainDiv.insertBefore.

45
00:03:51.256 --> 00:03:57.340
And we'll want to insert the div before
the UL so we'll pass div first then UL.

46
00:03:57.340 --> 00:03:59.500
So let's save our changes.

47
00:03:59.500 --> 00:04:02.110
And go over to the browser and refresh and

48
00:04:02.110 --> 00:04:04.770
you should see the check-box
we just added.

49
00:04:04.770 --> 00:04:06.830
Now it's there but
it doesn't do anything yet.

50
00:04:06.830 --> 00:04:13.490
So for example I'll add a name to the list
and check the box and it doesn't hide it.

51
00:04:13.490 --> 00:04:15.881
So let's fix that.

52
00:04:15.881 --> 00:04:20.410
Back in app.js let's add
an event handler to the checkbox.

53
00:04:20.410 --> 00:04:23.550
Now we all ready have
a reference to the checkbox here

54
00:04:23.550 --> 00:04:26.020
in the filter checkbox constant.

55
00:04:26.020 --> 00:04:30.701
So let's use this constant to
call addEventListener on right

56
00:04:30.701 --> 00:04:34.306
underneath where it was
inserted into the DOM.

57
00:04:34.306 --> 00:04:39.510
We'll say filterCheckBox.addEventListener.

58
00:04:39.510 --> 00:04:45.109
Now check boxes trigger a change event so
let's create a change event handler.

59
00:04:50.778 --> 00:04:53.349
And here we want to know
if the box is checked or

60
00:04:53.349 --> 00:04:56.817
not which can be found in
the checked property of the end put.

61
00:04:56.817 --> 00:05:00.757
Remember at the end put is
the target of the change event so

62
00:05:00.757 --> 00:05:04.628
let's store its value in
a constant called is checked.

63
00:05:13.442 --> 00:05:19.250
If the box is checked, is checked will be
true, and if not is checked will be false.

64
00:05:19.250 --> 00:05:22.060
So now we'll need a reference
to all the list items as

65
00:05:22.060 --> 00:05:25.400
well because we'll be looping
through them with this handler.

66
00:05:25.400 --> 00:05:29.560
So we can traverse to them from
the UL using the children property so

67
00:05:29.560 --> 00:05:31.190
right below the constant.

68
00:05:31.190 --> 00:05:38.700
We'll type const Lis ul.children.

69
00:05:38.700 --> 00:05:40.860
Now if you haven't seen this before,

70
00:05:40.860 --> 00:05:46.110
children provides a reference to
a collection of elements children.

71
00:05:46.110 --> 00:05:49.510
So next, if is checked is true,

72
00:05:49.510 --> 00:05:52.660
we'll want to hide invitees
that haven't responded yet.

73
00:05:52.660 --> 00:05:56.220
And if it's false, we'll need to make
sure all the invitees are displaying.

74
00:05:56.220 --> 00:05:58.870
This sounds like a perfect case for
an if statement.

75
00:05:58.870 --> 00:06:03.320
So right below our constant,
we'll write and if else.

76
00:06:03.320 --> 00:06:06.564
Passing in is checked as the condition.

77
00:06:14.097 --> 00:06:19.262
So now we also know that we'll need to go
through all the list items in either case.

78
00:06:19.262 --> 00:06:22.803
So let's set up for loops for both cases.

79
00:06:43.847 --> 00:06:48.710
Now, we can go ahead and copy this for
loop and paste it inside the else branch.

80
00:06:51.190 --> 00:06:53.660
And now we'll also need
to create a variable

81
00:06:53.660 --> 00:06:58.940
to represent the individual allies inside
each loop to make them more readable.

82
00:06:58.940 --> 00:07:06.069
So first, we'll create
a variable with let li = lists,

83
00:07:10.373 --> 00:07:15.110
Then we can copy this variable and
paste it inside the second for loop.

84
00:07:16.600 --> 00:07:21.120
All right so now let's address
the case where the filter is checked.

85
00:07:21.120 --> 00:07:24.840
So we need to know whether the individual
list items have been marked

86
00:07:24.840 --> 00:07:26.260
responded or not.

87
00:07:26.260 --> 00:07:30.230
Remember we're storing that information
on the list items class attribute.

88
00:07:30.230 --> 00:07:34.220
So we can check whether that class
exists or not in an if statement.

89
00:07:34.220 --> 00:07:39.008
So in the first for loop, we'll say if

90
00:07:39.008 --> 00:07:43.807
Li.classname, === responded,

91
00:07:47.232 --> 00:07:54.614
Run this code block, then else,
run the code we include here.

92
00:07:54.614 --> 00:08:00.000
And now we can hide an element by setting
its CSS display property to none.

93
00:08:00.000 --> 00:08:07.376
So in the else branch we'll
type li style.display, = none.

94
00:08:09.673 --> 00:08:13.470
And to show it again,
we can set its display to an empty string.

95
00:08:13.470 --> 00:08:20.180
So up here in the if branch, we'll say
li.style.display = an empty string.

96
00:08:22.350 --> 00:08:25.390
This will allow it to pick
up its previous style.

97
00:08:25.390 --> 00:08:29.574
So now let's move on to the case where
we want to show all the guests whether

98
00:08:29.574 --> 00:08:31.207
they've responded or not.

99
00:08:31.207 --> 00:08:35.657
In this case we simply want to set every
list items display property to an empty

100
00:08:35.657 --> 00:08:37.060
string.

101
00:08:37.060 --> 00:08:41.252
So in this bottom else branch,

102
00:08:41.252 --> 00:08:48.360
we'll add li.styl.display
= the empty string.

103
00:08:49.840 --> 00:08:53.820
All right, so let's save our file and
try this in the browser.

104
00:08:53.820 --> 00:08:57.910
I'm going to refresh the page and
enter a few names.

105
00:09:00.130 --> 00:09:01.180
Let's say Elizabeth.

106
00:09:03.440 --> 00:09:09.100
Andrew and Janice,
I'll add a couple more let's say Gil and

107
00:09:09.100 --> 00:09:14.190
Henry and then I'll just go through and
check two names off.

108
00:09:16.370 --> 00:09:21.510
And now when I check mark the new
filter the unchecked names disappear.

109
00:09:21.510 --> 00:09:24.700
And when I uncheck it,
they show up again, perfect.

110
00:09:26.830 --> 00:09:28.570
Our app now does everything
we need it to do,

111
00:09:28.570 --> 00:09:31.190
but there are still a few
improvements we can make.

112
00:09:31.190 --> 00:09:34.171
So far, we've been writing the app
in a stream of consciousness way.

113
00:09:34.171 --> 00:09:37.287
And this can really be useful for
getting something up and running and

114
00:09:37.287 --> 00:09:40.471
is often the approach developers use
when they first write a program.

115
00:09:40.471 --> 00:09:44.654
But once the basic functionality is in
place you can often improve your programs

116
00:09:44.654 --> 00:09:46.287
by looking at your code again.

117
00:09:46.287 --> 00:09:50.273
And re factoring or changing your code,
so that it still works the same but

118
00:09:50.273 --> 00:09:52.410
it's easier to understand an update.