Our users can add names to the list, remove them,

check them off when they responded, and edit them.

Now let's give users a way to filter the guest list, so

they can see everyone who has responded at a glance.

We'll create a checkbox above the list to toggle this feature on and off.

When the box is checked, we'll hide the guests who haven't yet responded and

display only those who have.

And when the box is unchecked, all invitees will be visible in the list.

So first, let's add a checkbox to the page, but rather than editing

index.html, let's add a checkbox and its behavior with JavaScript.

Apart from a checkbox,

we'll want to add a label to let users know what the checkbox is for.

And we can do this with a label element.

We'll place the label and checkbox in a div and append that to the page.

So to plan where we want to put the div let's take a look at index.HTML.

And looking at the code,

it looks like the best place to add the div is just before the UL element.

So let's go into app.js.

And at the top create the three elements

we want to use we'll create the div,

first with const div = document.createElement div,

then we'll create the label.

Let's call it filterLabel.

And we'll create the checkbox.

We'll call this one filterCheckbox.

Next under this we want to set the labels text content to hide those

who haven't responded.

So we'll type filterLabel.textContent.

And since this string has an apostrophe in it.

I'll switch over to using double quotes so inside the quotes.

I'll type hide those who haven't responded.

And now we'll set the input's type to checkbox with

filterCheckBox.type = checkbox,

And then we'll append the two elements the label and checkbox to the div.

So first we'll say div.appendChild filterLabel.

Then div.appendChild Filter checkbox.

Next, to insert this new div above the UL, we'll need to call insert before

on the parent of the UL which is the div with the class main.

Now we don't have a reference to the main development yet.

So let's select it.

Now the main div sits under the form in the DOM.

So I'll place it below the form and above the UL.

And now we can insert the div we built

into the DOM with mainDiv.insertBefore.

And we'll want to insert the div before the UL so we'll pass div first then UL.

So let's save our changes.

And go over to the browser and refresh and

you should see the check-box we just added.

Now it's there but it doesn't do anything yet.

So for example I'll add a name to the list and check the box and it doesn't hide it.

So let's fix that.

Back in app.js let's add an event handler to the checkbox.

Now we all ready have a reference to the checkbox here

in the filter checkbox constant.

So let's use this constant to call addEventListener on right

underneath where it was inserted into the DOM.

We'll say filterCheckBox.addEventListener.

Now check boxes trigger a change event so let's create a change event handler.

And here we want to know if the box is checked or

not which can be found in the checked property of the end put.

Remember at the end put is the target of the change event so

let's store its value in a constant called is checked.

If the box is checked, is checked will be true, and if not is checked will be false.

So now we'll need a reference to all the list items as

well because we'll be looping through them with this handler.

So we can traverse to them from the UL using the children property so

right below the constant.

We'll type const Lis ul.children.

Now if you haven't seen this before,

children provides a reference to a collection of elements children.

So next, if is checked is true,

we'll want to hide invitees that haven't responded yet.

And if it's false, we'll need to make sure all the invitees are displaying.

This sounds like a perfect case for an if statement.

So right below our constant, we'll write and if else.

Passing in is checked as the condition.

So now we also know that we'll need to go through all the list items in either case.

So let's set up for loops for both cases.

Now, we can go ahead and copy this for loop and paste it inside the else branch.

And now we'll also need to create a variable

to represent the individual allies inside each loop to make them more readable.

So first, we'll create a variable with let li = lists,

Then we can copy this variable and paste it inside the second for loop.

All right so now let's address the case where the filter is checked.

So we need to know whether the individual list items have been marked

responded or not.

Remember we're storing that information on the list items class attribute.

So we can check whether that class exists or not in an if statement.

So in the first for loop, we'll say if

Li.classname, === responded,

Run this code block, then else, run the code we include here.

And now we can hide an element by setting its CSS display property to none.

So in the else branch we'll type li style.display, = none.

And to show it again, we can set its display to an empty string.

So up here in the if branch, we'll say li.style.display = an empty string.

This will allow it to pick up its previous style.

So now let's move on to the case where we want to show all the guests whether

they've responded or not.

In this case we simply want to set every list items display property to an empty

string.

So in this bottom else branch,

we'll add li.styl.display = the empty string.

All right, so let's save our file and try this in the browser.

I'm going to refresh the page and enter a few names.

Let's say Elizabeth.

Andrew and Janice, I'll add a couple more let's say Gil and

Henry and then I'll just go through and check two names off.

And now when I check mark the new filter the unchecked names disappear.

And when I uncheck it, they show up again, perfect.

Our app now does everything we need it to do,

but there are still a few improvements we can make.

So far, we've been writing the app in a stream of consciousness way.

And this can really be useful for getting something up and running and

is often the approach developers use when they first write a program.

But once the basic functionality is in place you can often improve your programs

by looking at your code again.

And re factoring or changing your code, so that it still works the same but

it's easier to understand an update.