Welcome back.
In this video we'll tackle the last big remaining piece of functionality which is the creation of new
to do.
So over here on the completed version just to jog your memory the way that it works is I can type it
to you and then hit enter.
So there's no button to click.
I just hit enter and that will then submit and make me a new to do down here which I can check off or
delete.
So let's get started.
The first thing we need to do is add a listener to the text input that fires when we hit the enter key
.
To do that we have a few options.
We can use key press or we can use on we need to start by selecting the input and rather than leaving
it as just input.
I'm going to be more specific and say input type equals text.
So this will affect all inputs or type equals text just like that and then will add our DOT and I'll
use key press here input type calls text key press.
Here is the callback function we'll just start with a constant alt log and this constant log will run
on any key press not just the enter key.
So just to keep press and save and go back to the browser and refresh and we'll open this up here.
And as I press the key you see that I get key press.
So I'll hit another key and that keeps going up.
So we don't really want to do anything until the user hits the enter key.
So we need to change your code a little bit in the video where we introduced the key press method.
I also talked about the which property on the key press object and that corresponds to the key that
was pressed or the character code of the key.
So we're going to use that here and we're going to check if the character code is 13 which is the code
for the enter key.
So we need to work with the event object again once again that can be called anything we want and then
we're going to run if event which triple equals the number 13 which is how we check for the enter key
every single character has its own code and the enter key is 13 then we'll just do a constant log.
You hit enter and will save go back here.
Now I'm typing a bunch of keys that aren't enter.
And now I'm going to hit enter.
You can see we get calls about log.
You hit enter.
OK.
So rather than just cancel log in when we hit enter what we need to do is take the text out of here
extract it make a new ally that we then add after this one and then we want to clear this input so the
text goes away.
So we'll start by extracting the value out and that one is pretty simple.
We'll use the Val method.
So we want the value on the input which we can just do with a simple this vow.
So let's do a constable.
log this Darvell remember that this refers to the input that the key press occurred in refresh.
Type anything that's not enter.
Nothing happens.
Now if I hit enter a console that logs the value as you can see I type talo and I hit enter.
So let's save that to a variable.
Let's call it to do text equals the start vowel.
So that is grabbing new text from input.
And then what we want to do next is create a new ally and add to you well to do that.
I'm going to introduce a new method called append the way that append works is that we first select
an element to append to.
So we're going to be adding our things are to do.
So we'll be adding our dues to the U.N. on the page.
So this you will and it will be appending allies to that well.
So if I do you will append and I can give it a string of h t m l.
So if I add in ally right here and I just hardcoded something into start.
So this is a new ally that we appended to this UL
just like that I select the UL and this actually selects all else.
We only have one and then we run out of pens.
And it will take this string and add it to the well as each Chimo inside if you will.
So I'll show you that when we hit enter here it doesn't matter what we type because we're not using
it.
It adds in a new ally.
And every time I hit enter it will do that and if I inspect you can see it's an element that was added
inside the well just like these are like elements.
So what we want to do next though is actually use the do text variable.
All we need to do is use the plus sign to add that variable in.
So we will have two separate opening line tags and closing tags and we'll use a plus sign and add in
to do text and this will end up with one big string that has our do text which is whatever the user
typed in the input plus the opening and closing ally and we're sending that to you will refresh walk
dog and I hit enter and we get a new ally here.
So there's two big issues.
One we want to clear out this input and two we don't have the span.
Let's start by clearing out the input.
All we need to do is run dollar sign this vow and give it an empty string where it acts as a setter
rather than just a getter.
And that should now give us an empty input when I type a new to do every go on to do is added and this
is cleared.
Next let's get the span to show back up.
So all that we need to do there is inside of our ally we'll add in a span stack and that will be appended
.
And we just need to make sure we have the X right there and space just so that the X has a space between
it and denude to do text.
And if we save we're now appending a new string with an ally with a span inside of it.
So feed the dog and we end up with the span and the new ally.
However we have a problem with this code which is when I add new to do's like feed cat and I try and
check off the new ones.
They don't actually check off nor do they delete the old ones still do.
So the live event is still firing.
This span event still fires but the new tattoos that are dynamically created the ones that aren't there
when the page loads don't work.
This is what I was talking about when I showed you this slide and it said in most cases quick and on
Quake we'll both get the job done.
However there is one key difference.
Quick will only add listeners for existing elements on will add listeners for all potential future elements
.
And that's what we need to do here is use on because we want those listeners to be listening on all
potential allies.
So open up supply I'm here and I'll demonstrate how we can use on quick rather than just quick.
So it's not a matter of just swapping out to be on.
So if I just change this to be an ally on click just like that and I leave it like this.
Basically it's the exact same thing except with on rather than quick.
And if I go back and refresh the works on the original elements and if I add new ones it doesn't work
.
So it's not a matter of just swapping quick and on quick.
Well we actually need to do is change our code slightly.
So I'm going to show you the change first and then I'll explain it.
So what I did is I wrote you well on quick comma.
Why.
The reason I had to do this is that we can only add a listener using j query on elements that exist
when this code is run the first time.
And when this code is run the first time we don't have all the allies.
We only have three so if we add a quick listener to allies it will only add to those three.
So what we do instead is add a listener to the entire UL parent.
So anytime we click on that you will this listener will fire.
Except we add this second argument.
And what this code does is it says when an ally is clicked inside of a you will run this code.
So we added a listener to an element that exists when the page loads.
But we're really only listening to the lies that are clicked inside of that.
So let me demonstrate this now.
I'll refresh and let's add some new ones in here.
The old ones still work and the new ones can be checked off as well.
But the delete doesn't work.
So we need to go back and make the same exact change.
So we're going to listen on an event that exists when the page loads with on and then click but we only
want this code to run when a span is clicked inside of a well.
And if we leave it at that we should be good to go.
Now let's test it out.
We can delete the old ones and the new ones and we can cross both off as well.
All right so let's summarize some of the new material here.
The first thing is the append method which can take a string of HMO and it will then append those elements
to whatever we selected.
And the second thing was using on rather than quick and adding in this UL on quick.
And the second argument that specifies allies that may or may not have been on the page when it loaded
inside of the well that definitely was on the page when the page loaded.
So we're adding event listeners to the elements that exist when page loads so that we can account for
elements that aren't there yet.
That's it for our basic functionality.
We have a complete To Do list.
What we'll focus on in the next video is the styling.
And we definitely have a ways to go there.