1
00:00:00,460 --> 00:00:04,030
Let's create a check box to mark off
when a guest confirms they're coming

2
00:00:04,030 --> 00:00:05,530
to the party.

3
00:00:05,530 --> 00:00:09,210
When we create the list item,
in the submit handler,

4
00:00:09,210 --> 00:00:12,990
this list item should not only
have the text but a check box too.

5
00:00:12,990 --> 00:00:17,970
Now we've already created and appended
list items to the un-ordered list element,

6
00:00:17,970 --> 00:00:22,320
so this will be similar, though it will
want to associate a label with a check box

7
00:00:22,320 --> 00:00:24,620
so users will know what it's for So

8
00:00:24,620 --> 00:00:29,930
first right under where we created
the list item and set it text content.

9
00:00:29,930 --> 00:00:36,983
Let's create the label with const
label = document.createElement.

10
00:00:39,408 --> 00:00:40,461
Label.

11
00:00:43,998 --> 00:00:48,881
And we'll set its text to confirmed with

12
00:00:48,881 --> 00:00:53,920
label.textContent equals Confirmed.

13
00:00:53,920 --> 00:00:59,064
After that, let's create an input element
and store it in the variable check box.

14
00:01:11,756 --> 00:01:16,611
We can then set the inputs
type to checkbox

15
00:01:16,611 --> 00:01:21,752
with the checkbox.type equals checkbox.

16
00:01:23,260 --> 00:01:25,950
Once we've created, and
configured the input.

17
00:01:25,950 --> 00:01:31,210
We can append it to the label
with labeled dot append

18
00:01:31,210 --> 00:01:36,230
child check box.

19
00:01:36,230 --> 00:01:45,070
Then append the label to the list
element with li append child label.

20
00:01:45,070 --> 00:01:46,770
Let's try this out on the browser.

21
00:01:46,770 --> 00:01:47,600
We'll save the file.

22
00:01:48,810 --> 00:01:56,200
Refresh and if we enter a name, let's say
Mary, we see that a check box appears.

23
00:01:56,200 --> 00:01:58,510
Now we can check off when
we hear from Mary, great.

24
00:02:00,820 --> 00:02:03,540
So now let's add a handler
to the check box.

25
00:02:03,540 --> 00:02:07,950
When the check box is checked we'll add
a class of responded to the list item.

26
00:02:07,950 --> 00:02:11,000
Now, there's already a style for
that class in the CSS

27
00:02:11,000 --> 00:02:15,280
that changes the color of the text and
border when that class is added.

28
00:02:15,280 --> 00:02:18,810
So let's first add the event
handler to add the class.

29
00:02:18,810 --> 00:02:24,330
To add an event listener to any new list
item we could call admin listener on

30
00:02:24,330 --> 00:02:29,390
each individual check box as we create
them inside this submit handler, but

31
00:02:29,390 --> 00:02:32,790
we can also take advantage of event
bubbling, that's when an event on one

32
00:02:32,790 --> 00:02:35,910
element bubbles up to its parent or
other ancestors.

33
00:02:35,910 --> 00:02:39,480
So this means we can add
the handler to just one element,

34
00:02:39,480 --> 00:02:42,420
the UL tag holding the list items and
check boxes.

35
00:02:42,420 --> 00:02:46,960
This leads to better performance and
code that's easier to read and understand.

36
00:02:46,960 --> 00:02:51,480
And while we could listen for a click
event on the check box to trigger our

37
00:02:51,480 --> 00:02:55,510
event, there's a better event to use
with check boxes, the change event.

38
00:02:55,510 --> 00:02:59,350
After all we're not really interested
in whether the box is clicked we're

39
00:02:59,350 --> 00:03:03,350
interested in when the checkbox state
has changed from unchecked to checked or

40
00:03:03,350 --> 00:03:04,610
from checked to unchecked.

41
00:03:05,800 --> 00:03:10,600
So to call addEventListener on the ul
element we'll need to select it first But

42
00:03:10,600 --> 00:03:14,100
looking inside the submit
handler we just wrote

43
00:03:14,100 --> 00:03:17,020
notice that we've selected the U-L here.

44
00:03:17,020 --> 00:03:20,500
Now if you remember how JavaScript
functions are scoped you know we can

45
00:03:20,500 --> 00:03:25,300
access variables from outside the function
where they live so if I try to access

46
00:03:25,300 --> 00:03:30,884
the U-L outside the function
UL.addEventlisterner.

47
00:03:32,440 --> 00:03:33,570
It's going to be undefined.

48
00:03:34,870 --> 00:03:40,170
On the other hand, variables declared
outside a function can be accessed inside.

49
00:03:40,170 --> 00:03:43,740
That's how our submit handler can
access the input variable for

50
00:03:43,740 --> 00:03:46,550
example, which has been declared
at the top of the file.

51
00:03:46,550 --> 00:03:51,850
So if we simply move this declaration
of ul to the top of the file,

52
00:03:55,000 --> 00:03:58,008
The submit handler will
still have access to it and

53
00:03:58,008 --> 00:04:02,100
we can also access it here where we
want to set up our change handler.

54
00:04:04,490 --> 00:04:07,510
So now let's move back to building
our change event handler.

55
00:04:09,250 --> 00:04:14,250
I'll type change as a string for
the event type, And then create

56
00:04:14,250 --> 00:04:19,910
the function by adding the parameter
e which will hold the event object.

57
00:04:23,599 --> 00:04:26,784
And now let's find out whether
the check-box is checked or

58
00:04:26,784 --> 00:04:30,289
not check boxes have an attribute
called checked that is true when

59
00:04:30,289 --> 00:04:33,690
they are checked and
false when they are unchecked.

60
00:04:33,690 --> 00:04:36,530
So let's just log that value
to the console right now and

61
00:04:36,530 --> 00:04:41,300
we can access the checkbox from the event
object and its property target.

62
00:04:41,300 --> 00:04:46,815
So will type consulate up log target

63
00:04:46,815 --> 00:04:51,070
checked over in the browser,

64
00:04:51,070 --> 00:04:56,010
if you open your consul window,
add a name to the list and

65
00:04:56,010 --> 00:05:00,540
click on the box a few times,
you'll see the values in the console.

66
00:05:00,540 --> 00:05:05,750
So we can use these values to set and
unset the class on our list items.

67
00:05:05,750 --> 00:05:09,920
Moving back to app.js,
you can delete the console.log.

68
00:05:09,920 --> 00:05:14,870
And now let's get a reference to the check
box itself here on the first line of

69
00:05:14,870 --> 00:05:19,444
our change event handler
with const checkbox

70
00:05:19,444 --> 00:05:24,610
equals event.target.

71
00:05:24,610 --> 00:05:28,930
Once we have the value of the checkbox
which will be true if the box is checked

72
00:05:28,930 --> 00:05:32,920
or false if it's not will stored
in a variable named checked.

73
00:05:40,160 --> 00:05:44,800
Now since we'll change the class of the
list item, when the check box is checked.

74
00:05:44,800 --> 00:05:47,190
We need a reference to the list item.

75
00:05:47,190 --> 00:05:51,820
List item is the checkbox is grandparent
because the label is a child of list item

76
00:05:51,820 --> 00:05:55,110
and the checkbox is
the child of the label.

77
00:05:55,110 --> 00:05:59,980
So we can traverse to the list
item by calling parent node twice

78
00:05:59,980 --> 00:06:04,170
that is parent node once to
traverse to the label element and

79
00:06:04,170 --> 00:06:07,260
then parent node again to
traverse to the list item.

80
00:06:07,260 --> 00:06:09,495
So I'll store that in
a variable named listitem.

81
00:06:14,230 --> 00:06:21,322
Then we'll say
checkbox.parentNode.parentNode

82
00:06:24,046 --> 00:06:28,070
Next we'll set the class name
of the list item to responded.

83
00:06:28,070 --> 00:06:31,410
If check is true or
remove the class if check as false.

84
00:06:31,410 --> 00:06:33,100
Now I just used the word if so

85
00:06:33,100 --> 00:06:36,115
that's a good sign that the If
statement will come in handy.

86
00:06:36,115 --> 00:06:39,915
So right below our constants
will add if and else blocks.

87
00:06:48,335 --> 00:06:51,575
Now since checked is a boolean

88
00:06:51,575 --> 00:06:55,210
we can just put it right here
in the parentheses by itself.

89
00:06:55,210 --> 00:06:56,770
And we'll know that the first clause, or

90
00:06:56,770 --> 00:07:02,010
branch, will run if checked as true and
the else branch will run if not.

91
00:07:02,010 --> 00:07:06,080
So, we can use the class name property of
list item to set the class accordingly.

92
00:07:07,260 --> 00:07:14,377
So, in the if branch, we'll say
listitem.className equals responded.

93
00:07:16,648 --> 00:07:24,170
Then an else, we'll say listItem.className
equals an empty string.

94
00:07:24,170 --> 00:07:25,670
All right, so let's try this out.

95
00:07:25,670 --> 00:07:33,260
I'll save the file, I'll refresh the
browser then enter a name and hit enter.

96
00:07:33,260 --> 00:07:36,560
And I'll add a couple more names just so
you can see how this works.

97
00:07:39,530 --> 00:07:41,080
And now when I check and

98
00:07:41,080 --> 00:07:44,490
uncheck the boxes,
you can see our styling is kicking in.

99
00:07:44,490 --> 00:07:44,990
Cool.

100
00:07:47,470 --> 00:07:50,110
So great.
You've just added a delegated handler

101
00:07:50,110 --> 00:07:55,060
that marks guests off when they
responded to our users RSVPs So

102
00:07:55,060 --> 00:07:59,100
now, what if we want to remove a name
from the list, how would we handle that?

103
00:07:59,100 --> 00:08:00,822
Well, I'll show you in the next video.