In this lecture, we are going to continue programming our application, he will have finished the version
of our project and in this video, I'm going to show you how to edit the notes and also how to delete
them by clicking on the proper icons.
So, for example, when we click on edit button down, the input appears and you are able to edit the
note.
If we add here some text and then press enter, the note will be updated.
Also, if we clear the input and press enter that the note will be deleted.
If we click on delete icon after that, the note will be removed.
How to get this result?
You will see step by step in this video.
OK, I'm going to demonstrate some unknown and new things in this lecture, and because of that I've
decided not to give it as a task.
But anyway, before I show you how to program it, you can post a video and try it on your own.
All right, let's get started.
Go back to brackets.
You have the codes from previous video.
And also we have here our working project.
If we click on those icons, they obviously didn't work yet as we have seen edit and it happens on click
events.
And therefore, you may think that we need to attach add event listeners for all of these icons.
Of course, this is one of the ways, but there is much better and interesting solution.
I'm going to use only one add even listener, which will be attached to your element and will work for
all of those icons you will.
Element is already defined on global level, so I'm going to use it.
But before I actually start writing the codes, let's separate different parts of our project with comments.
That's right, about eight items.
And below, right, edit and delete items.
OK, as we said, let's attach to you elements at event listener, so right, you will not add event
listener and he said the parentheses that indicate the click event, right click and then function.
As usually I'm going to test and castle how it works.
So right, Castle, good luck.
Hello.
Reload and click on any part of your element.
It doesn't matter, you see that on each click, the event is fired.
OK, actually we want to execute the code inside function when we click exactly on those icons that
at first thought from added feature and for testing proposals, I want to see hello in council only
when I click on added icon products again, we need to use event object and the target property.
So let's pass it as a parameter in function and also in cancel that log instead of hello.
Right e dot target.
Then reload and click a couple of times on different parts of your element.
You've seen council that we are getting the exact elements where we click on and all of these elements
are contained in, you will aren't OK from the previous videos.
You remember that you don't target property and especially what these were acting in the same way.
But in this case, if we change a target into this that reloads and again click several times anywhere
on your element, each time it will return, only you will and not its children.
All right, it was just for your information, in order to become more powerful developer, you need
to know such details.
OK, let's go ahead and get back to Target inside, console, reload and then click on edit button.
So you see, I element in console with its class names.
You see that it has two class names.
First, it's common for all icons, but the second one is unique.
Therefore, I'm going to use it in order to access on second class name, we need to use class leased
property.
So we write to your DOT class at least.
And then indicate the proper index number in this case, we need to select a second class name, therefore
we need to write one.
Reload, then click again on added buttons.
And you see that we have second class name in Castle.
OK, so the code inside function should be executed in the case.
If I click on that icon so that we need to use if conditional statement.
So right.
If done inside the parenthesis, right.
To target DOT at least.
And again, indicate the index number as one than triple equals.
Let's go to Extremophile and copy the class name and then paste it here.
Then please consider log inside curly braces and write inside parentheses.
Hello.
Refresh, then click anywhere except edit button, you see that it doesn't work, but if we click on
added button then we will have hello in council.
OK, great.
I think that it makes sense.
Let's move on to the next step and take a look again on a finished project.
So when we click on Add Button, you see that icons become hidden.
So let's do it.
At first we need to access on parent elements of those icons, which is a second paragraph.
But first, let's remove this castle dialogue, then create variable and call it parent paragraph,
so rights of parents power.
Then we use again to target, so write it on target and let's reach the element using paranoid property.
So right here, paranoid.
In order to hide it on Callick event, we need to use style property, so right below parent power dot
style dot display equals not.
Reload, click, and you see that icons are hidden.
OK, perfect.
Let's move on to the next step.
As we know, at least element includes two paragraphs and input, which is hidden from success.
The second paragraph is already defined and now I'm going to define the rest of these elements, create
variable and call it notes, because actually this paragraph contains the text of note.
The first paragraph is proving a sibling for a second paragraph that we have just created.
So in order to access on it, I'm going to use previous elements, sibling property, so.
Right.
Parent power, dot, previous element, sibling in the same way.
Input element is the next sibling for the second paragraph.
Therefore, I'm going to use next element sibling property.
So create variable input.
Write for input equals parent power dot next sibling.
Let's again test in council and get these variables on Callick.
So write council that log.
Notes.
And then he put.
Reload, click on edit button and you see that we have first paragraph and inputs in council at the
same time.
All right.
The next step is that we need to appear input element and click again.
I'm going to use excessive style property, so.
Right.
Input dot style, dot display.
And in this case, we need to assign a value block.
Reload Kalik.
And you see that the input has appeared all right.
The last thing that I'm going to show you in this video is to insert the text of the note as the value
of the input.
So for that, I'm going to write input that value.
Equals.
Note not and use here the text property by text content.
Refresh.
Click and here we go.
All right, I'm going to stop here, but we have not done editing and deleting part yet, we will continue
it in the next video.