Preview
Video Player
00:00
00:00
RSVP Checkbox
8:01Let's allow users to mark off when guests respond that they intend to come to the party.
Let's create a check box to mark off
when a guest confirms they're coming
0:00
to the party.
0:04
When we create the list item,
in the submit handler,
0:05
this list item should not only
have the text but a check box too.
0:09
Now we've already created and appended
list items to the un-ordered list element,
0:12
so this will be similar, though it will
want to associate a label with a check box
0:17
so users will know what it's for So
0:22
first right under where we created
the list item and set it text content.
0:24
Let's create the label with const
label = document.createElement.
0:29
Label.
0:39
And we'll set its text to confirmed with
0:43
label.textContent equals Confirmed.
0:48
After that, let's create an input element
and store it in the variable check box.
0:53
We can then set the inputs
type to checkbox
1:11
with the checkbox.type equals checkbox.
1:16
Once we've created, and
configured the input.
1:23
We can append it to the label
with labeled dot append
1:25
child check box.
1:31
Then append the label to the list
element with li append child label.
1:36
Let's try this out on the browser.
1:45
We'll save the file.
1:46
Refresh and if we enter a name, let's say
Mary, we see that a check box appears.
1:48
Now we can check off when
we hear from Mary, great.
1:56
So now let's add a handler
to the check box.
2:00
When the check box is checked we'll add
a class of responded to the list item.
2:03
Now, there's already a style for
that class in the CSS
2:07
that changes the color of the text and
border when that class is added.
2:11
So let's first add the event
handler to add the class.
2:15
To add an event listener to any new list
item we could call admin listener on
2:18
each individual check box as we create
them inside this submit handler, but
2:24
we can also take advantage of event
bubbling, that's when an event on one
2:29
element bubbles up to its parent or
other ancestors.
2:32
So this means we can add
the handler to just one element,
2:35
the UL tag holding the list items and
check boxes.
2:39
This leads to better performance and
code that's easier to read and understand.
2:42
And while we could listen for a click
event on the check box to trigger our
2:46
event, there's a better event to use
with check boxes, the change event.
2:51
After all we're not really interested
in whether the box is clicked we're
2:55
interested in when the checkbox state
has changed from unchecked to checked or
2:59
from checked to unchecked.
3:03
So to call addEventListener on the ul
element we'll need to select it first But
3:05
looking inside the submit
handler we just wrote
3:10
notice that we've selected the U-L here.
3:14
Now if you remember how JavaScript
functions are scoped you know we can
3:17
access variables from outside the function
where they live so if I try to access
3:20
the U-L outside the function
UL.addEventlisterner.
3:25
It's going to be undefined.
3:32
On the other hand, variables declared
outside a function can be accessed inside.
3:34
That's how our submit handler can
access the input variable for
3:40
example, which has been declared
at the top of the file.
3:43
So if we simply move this declaration
of ul to the top of the file,
3:46
The submit handler will
still have access to it and
3:55
we can also access it here where we
want to set up our change handler.
3:58
So now let's move back to building
our change event handler.
4:04
I'll type change as a string for
the event type, And then create
4:09
the function by adding the parameter
e which will hold the event object.
4:14
And now let's find out whether
the check-box is checked or
4:23
not check boxes have an attribute
called checked that is true when
4:26
they are checked and
false when they are unchecked.
4:30
So let's just log that value
to the console right now and
4:33
we can access the checkbox from the event
object and its property target.
4:36
So will type consulate up log target
4:41
checked over in the browser,
4:46
if you open your consul window,
add a name to the list and
4:51
click on the box a few times,
you'll see the values in the console.
4:56
So we can use these values to set and
unset the class on our list items.
5:00
Moving back to app.js,
you can delete the console.log.
5:05
And now let's get a reference to the check
box itself here on the first line of
5:09
our change event handler
with const checkbox
5:14
equals event.target.
5:19
Once we have the value of the checkbox
which will be true if the box is checked
5:24
or false if it's not will stored
in a variable named checked.
5:28
Now since we'll change the class of the
list item, when the check box is checked.
5:40
We need a reference to the list item.
5:44
List item is the checkbox is grandparent
because the label is a child of list item
5:47
and the checkbox is
the child of the label.
5:51
So we can traverse to the list
item by calling parent node twice
5:55
that is parent node once to
traverse to the label element and
5:59
then parent node again to
traverse to the list item.
6:04
So I'll store that in
a variable named listitem.
6:07
Then we'll say
checkbox.parentNode.parentNode
6:14
Next we'll set the class name
of the list item to responded.
6:24
If check is true or
remove the class if check as false.
6:28
Now I just used the word if so
6:31
that's a good sign that the If
statement will come in handy.
6:33
So right below our constants
will add if and else blocks.
6:36
Now since checked is a boolean
6:48
we can just put it right here
in the parentheses by itself.
6:51
And we'll know that the first clause, or
6:55
branch, will run if checked as true and
the else branch will run if not.
6:56
So, we can use the class name property of
list item to set the class accordingly.
7:02
So, in the if branch, we'll say
listitem.className equals responded.
7:07
Then an else, we'll say listItem.className
equals an empty string.
7:16
All right, so let's try this out.
7:24
I'll save the file, I'll refresh the
browser then enter a name and hit enter.
7:25
And I'll add a couple more names just so
you can see how this works.
7:33
And now when I check and
7:39
uncheck the boxes,
you can see our styling is kicking in.
7:41
Cool.
7:44
So great.
You've just added a delegated handler
7:47
that marks guests off when they
responded to our users RSVPs So
7:50
now, what if we want to remove a name
from the list, how would we handle that?
7:55
Well, I'll show you in the next video.
7:59