Hey, welcome back.
This is a challenge that's going to wrap up all of the stuff that we've learned in the earlier lessons.
So the objective of this challenge is to add items to an existing list, or you can create a brand new
list and have the ability to click the items in order to add a straight through to those list items
so you can add them dynamically as well as have some existing ones.
Also create an input that can add new items to the list.
And then also within the list items added an X in order to remove the items from the list.
So using the class of red, this can be the one that gets added in whenever it gets clicked, adds the
class of red to it, which will show the strikethrough.
What color?
Red also update the background color.
And when there's an X and if the X gets clicked, then you need to remove that element from the list
from the visible area as well.
With the input, you can select the contents from the input and also listen for the enter key.
So no need for a button in order to add items to the list.
All we're going to do is listen for the entire key, which was key code number 13, and that's going
to invoke the function to make a new item and making new item using create element, creating a list
item, adding it to the unordered list with the content that's contained within the text area.
So I know that was quite a bit of instructions.
You can go out and try this.
I'll show you the solution code and also walk you through as we create this little mini application
and I'll walk you through.
The solution coming up was fairly complex.
So I did want to show you a quick example of what we want to create in this challenge.
So we have a default list, bananas, milk, bread.
When we click the items, we get a strikethrough and that's adding in the class of red.
We also get this option of an X, so that gives us the ability to remove the item from the list.
If we remove something that we want to add in or if we want something new that we want to add in, we
can always add in as many items as we want into the list and clicking these.
They're all going to function the same way.
And when you click them again, it's all it's doing is toggling that class of red on and off of that
element.
So go ahead, pause the video, try it out and walk you through the solution.
First of all, make sure that you do have an updated index file.
You can use an unordered list as long as you've got an input.
We've given this input a name of new item as well as updated the style.
So once you're done that, you're ready to move on to the JavaScript.
So first we want to do is select the input.
We can call it input, select selecting the documents and query selector.
So we're only selecting that one element.
And the element that we're selecting is in input.
So making sure that that input has a name.
Of new item and I'm going to single coat because I've already used the double coat and double and refresh.
And we'll make sure that we did select the element properly, so we do have the proper element selected,
so that's good.
And we could also use input because we only have the one.
But of course, we want to make this ability to extend on it.
This is our main list, so we need to select that element.
This is where we're going to be adding the new elements, the new content to the list.
So using the query selector and we only have the one unordered list, so we don't have to be that specific
with it.
And again, refresh and just make sure that we do have the right elements.
We do have the unordered list.
There are some existing items in the list as well.
So let's first go through that list, so creating a list, all list items and using document, because
we do need to add the same functionality to the existing ones.
So we've got all of the list items.
So we want to loop through all of them selecting out any of the elements that have list that are list
items.
And let's add our loop, where we're looping through X equals zero, and while X is less than all list
items length and then incrementing X, and then as we loop through, we can do all list items X.
An odd event listener to that.
And that we're going to listen for is a click and if it's clicked, that we're going to invoke a function
and we'll create that function now.
So that one is just called my this one is going to toggle the class of the element and let's set up
a variable where we're going to have this class list and we're going to toggle it.
So toggling the class of red.
So see what that looks like.
So now when I click it, we see we get that strikethrough.
So all it's really doing is adding in the class and removing it as I'm clicking and toggling.
I also want to have the ability to remove these elements.
So I want to add in an option there to add a new one.
And we can do that by adding in another element in there.
So that can be.
So if it's toggled to read, they don't want to add in the option to remove it.
So let's let's create a span.
This is a document create element and the element that we're creating as a spam.
So within the span, there's going to be an X and clicking on that X is going to allow the user to remove
this element.
And we could just make it an uppercase X.
And on the spane itself, this is where we're adding another event listener.
So we're gonna have two different event listeners and this one is going to be listening for the click
as well.
And when it gets clicked, we'll just do an anonymous function within the listener and we're going to
use this elements and then we're going to navigate up to the parent.
You can also do this remove, but I usually find that navigate up to the parent and then removing the
parent is the way to navigating up to the parent and removing the parent is the way to go.
Because, of course, this is a span that's going to be contained within the parent and the parent is
the list item.
So we want to move up to the list item and do the removal.
And that's why we've got this parent element and we're doing the remove.
And then lastly, we're taking this and we're spending a child to it.
And the child that we're spending is the span that we just created.
And this isn't actually care sector, it's create element.
So it was my mistake.
So that one should be create element because we are creating an element, not selecting an existing
one.
So that's the difference there.
So make sure you make that correction.
And I do apologize.
Let's try that out.
So now whenever we click it, we get this X and when I click the X, it removes the element and also
maybe let's add in a little bit of space there as well.
So, again, whenever we click it and we can always toggle off that click and we've got the Xs there
and we should also check to see if it does contain a span and if it does contain the span, then we're
not going to add another one in as we're toggling and we want to remove it out as well.
So we can do that if temp is true, because remember, we're getting returned back a boolean value.
So that means that either it's true or false.
And if it's false, then we're going to do get elements by tag name and selecting the element spane.
So if it does exist, then we're going to select any spane that's contained within the element and then
remove it.
So see what that looks like.
So we have our X and then when we unclick the X disappears and then the X still has that functionality
that we need.
So now that we've deleted everything from our list, we need a way to add new items into the list other
than refresh the page.
So I show you how to do that.
That's going to come up in the next lesson.