OK, let's continue in this election.
I will show you two main things, how to use key press event in order to add note using and Turkey and
then how to delete notes clicking on delete button.
OK, we need to use another ADD event listener, which will be attached to input elements.
And here I'm going to use key press event using key press event.
Events are fired when we press on any key on keyboard.
So write input stored at event listener then inside the parentheses indicate the event.
Key press.
And also right to function.
Then test again in council how it works.
So right inside the collaborationist council, good luck.
Hello.
Reload the page, click, and when we write something down on each key press, the event is fired.
All right, so when I click on added button, the input is appeared.
But you notice that there is no any button in order to add updated content to the note.
And I'm going to do it using and Turkey.
So for that, again, we need to use event object and one of its property called Key Code.
Let's pass it as a parameter and then write it in council as well.
Reload, click on edit, then type one character, and you see that in console we have event object
called keyboard object.
If we drop it you will see that it has multiple properties which are a little bit different than it
was.
In case of click event from these properties, we need to focus on key called property.
In this case, it has the value one zero one, which is relevant to key.
As we mentioned, we need the value of key code properties when we press on enter key.
So let's press on it.
And you see that we have another event object and instead of E, we have key names.
Enter, let's drop down it.
And you see that the value of key called property for entry is thirteen.
All right.
This is what we needed.
Now let's use if conditional statement and pass the following condition.
As we said, we need to execute a bunch of code when we press on and Turkey therefore in condition e
dot key code must be equal to thirteen.
So.
Right.
If that idot key code.
Triple equals to 13.
Let's test again in Castle right here.
You pressed and Turkey.
And then create statements and Rights Council dialogue.
You pressed other key.
Then reload, click on added button and then press at first and you have the keys on keyboard, you
see that we have you press the other key and when we press on enter, then we have you pressed and tricky.
All right.
It works perfect.
Let's remove our statement and the council as well.
Now, the next step is to grab the updated value from input and assign it to the note as a new content.
So we need to write note that text content.
Equals it puts that value.
Now we need to appear again icons for added and delete and at the same time, we need to hide the input
so that I'm going to use, again, stand properties.
As you know, I consult content in second paragraph, which is parent power.
So we need to.
Right parent park, dot style, dot display.
Equals to block
and then for input elements, right, input, dot style, dot display equals to not.
Then reload and just click on add it, then type something pressed the enter key and here we go, it
works but if we clear inputs and then press enter, then the item will be updated as empty.
We don't want it.
We want the item to be deleted if it's empty.
So then we need another if statement in which those codes should be included.
So right here, if the condition as input dot value, which not equals to just rink's.
Then pass these coats inside the curly braces.
And then we need Elsah statements where we will pass the codes in order to delete item if the updated
value is empty, so.
Right, or else I'm going to use a remote child method in order to delete item.
In this case, we need to delete at least element.
Therefore, as you remember, we need to access on its parent, which is in this case, you will.
So at first let's access on at least elements create variable Varelli equals input that parent node.
And then delete the item.
Right, well, I got a note, so now we have access on all elements, and from here we are able to delete
the item by remove a child and cross the parameter as like let's reload, then click on edit and clear
the input, then press the enter and you see that the whole item is gone.
OK, great.
Regarding added feature, we are done.
And now let's move on to the next step, which is to delete the item when we click on Delete Icon.
I'm going to use the same approach as it was in case of editing the items we need to use or else if
statement with the similar condition.
But in this case, we need to use the last name of delete icons.
So let's copy and paste your.
So we need to grab the name of the icon from the Extremophile.
That's copy and paste here.
All right, the condition is ready now let's test again in Castle, right, Castle, good luck.
It works.
Then reload, click on delete button and see if it works.
OK, let's get rid of cancel that log and then write the similar code as it was in previous ALSA statement.
Again, we need to delete list item using its parent.
So at first, let's define list element.
But in this case, I'm going to access on it with a different way.
So let's create a variable list, right.
For our list equals and I'm going to use your target property.
Right.
Target.
And then use Parad note and again note.
After that removed the element using remote child method.
So, right, at least that parent node.
That remote child.
And passed the parameter, as least.
Reload the page, then click on delete and you see that the items are deleted perfect, so the additon
delete part is done.
Let's move on and program hiding elements in the next video.