So last time we left off with a function where we could click the elements and these are the existing
elements and we have an option, we get this X where we can delete them from the page.
And if you go into inspect, you can also see that this gets deleted out.
So that element gets completely deleted.
And the whole list item that gets deleted whenever you click the span's with the X inside of them.
And also when you click on the element itself, we have the class of red being added and that gives
us that strikethrough and the red X..
So let's finish this application.
And the other thing we need to do is have the ability to add items into the list.
So we're going to add that in and we're going to create a function in order to handle that.
So we've already selected that input element within the input select object so we can use that, adding
an event listener to it.
And the event listener that we're going to add is going to be the key process because we're not adding
in a button.
Instead, we're going to detect the key press by checking to see if the user has pressed the enter key,
and that's going to give us the ability to enter in.
So we're adding an event listener.
The event listener that we're listening for is key press on that element.
We're going to do an anonymous function passing in the event object as event, and we're going to listen
for the enter key and enter key, as we saw before, has a key code.
And the key code for the enter key is 13.
So any time the user is on that input field and they press enter, it's going to add the new item.
That's the event that we're listening for.
So any of the key events, any other anything other than 13, nothing is going to happen.
And once it gets invoked, we're going to invoke once it gets clicked, we're going to create a new
function.
We're going to evoke a new function called Make New.
So we've got a function make and I'll scroll this up so we can see it a little bit better.
So within the make you function, this is where we're going to create a brand new list item using document
create element.
And the element that we're creating is a list item so that we can add it to our unordered list and for
the list item, we want to add an event listener, the event listener that we're adding and we're listening
for is the click event.
And whenever it gets clicked, it's going to evoke the function, my list.
And that's the one that we have down here.
So this list item will function the same way as all the existing ones.
Whenever we load the page, they're going to all function within the same way.
We need to add text node.
So we need to get a text value.
And the text value is coming from the input select element.
And whatever value is contained within that input is going to be our new value that we're adding into
the list.
And we also want to clear out that value and the way that we can do that.
So just as we can get the value, we can set the value and we want to just set the value to be blank,
then we're going to create our temp node in order to create a text node.
So document create.
Text Noad and then within there, this is where we're going to use that text value and taking the last
item that we've just created using Append Child, we can attend the temp node that we just created.
So adding in the text into the list item and you can console log out the list item before we add it
to the page.
So now whenever I've got anything written in there, I'm pressing the enter key right now.
We see we've got that list that gets created.
So all we want to do is take the mean list.
So that's the unordered list and use append child to append that freshly created list item to the end
of the list.
So let's try that.
So we've got test and we've got bananas, milk, bread and test.
So test doesn't look quite right, but we click it, we see we have the X and we can remove it from
our list.
So let's try that one more time on the bigger screen refresh.
So typically, if you're going to the store, you've got bananas, bread, and how about you get some
apples and some carrots and you can create as many items in the list as you need and also add in water
drinks.
So whatever you want, you can add into your grocery list.
And if you do make a mistake, you can click the item or if you've already retrieved the item, you
can click it as you go through your grocery list.
And you can also remove it from the list by clicking the X.
So any one of the items, one in one of the elements, they're going to function the same way.
So solution to this challenge.