All right, I'm sure that you have tried your best and somehow did this task, as I promised in this
election, I'm going to show you a solution of this task.
Step by step, as we said in previous video, we need to create a new list element with all this, including
elements.
This list element eventually should become one of the members of your element.
And because you will is its parent.
First of all, I'm going to select this element.
So write variable.
You will equals document dot.
Query selector.
And right inside the parentheses, you will.
As you remember, adding items should happen when we click on add button, therefore we need to attach
additional Eastnor on that element.
Let's go to Index DOT HDL.
This element is placed inside the form, as we mentioned, it has the ID attribute at buttons.
So I'm going to use it and select this element, go back to cryptologist file and the right the following
document that gets elements by ID.
Then inside the parentheses indicate the attribute at the bottom.
And then attached to it at event listener right here at event listener inside the parentheses indicate
the event as Kalik.
Then create function.
And now I'm going to test it in council, so it's the culebras, this White Castle dot.
Hello.
Reload, click on add button and you see that it works, but again, because of that, it refreshes
the page on each click.
We need to prevent it.
So use event object and pass it as a parameter in a function and then use prevent default method.
So right e dot prevent default.
Then reload.
Click and it works.
OK, let's remove this council.
We don't need it for now.
The next element that I'm going to use is input elements, so I'm going to select it.
Let's have a look to indicate that extremophile this input element is inside form as well.
It has the ID add input, so let's grab this element using it, attribute, create a variable and call
it at input.
Which equals documents that gets elements by ID.
And pass the ID at input, all right, at this point, we have access on every existing elements and
it's time to go ahead and create the least element with all its including elements.
I mean, pro-growth, I consent and input.
First of all, create variable apply and use, create element methods so right var I equals document
that creates elements and inside the parentheses plus at least element.
Using this method, we also need to create other elements which will be included inside the least element
in order to write the code nicely.
Let's use a shorthand method, which is also a better practice and separate the variables by commas.
In this case, as remember, we don't need to write each time keyword.
So place here, comma, and then take a look on at least elements here.
We have two paragraphs.
First one is for text and second one is for icons.
So let's go back to script or just file and create a first paragraph.
Colleagues first par.
Which equals document, that creates element.
And he said the parentheses indicate paragraph elements.
In the same way, create a second paragraph right to your second power equals documents that create
element.
Pete.
OK, as he noticed, the second paragraph contains two icons, therefore, we need to create them,
so create another variable and name it as first icon.
This icon is for editing the notes.
Right here, document that creates element.
And indicate the elements as I.
Then let's duplicate it and change for a second into second icon.
And the last element we got to create is input, so right here, input equals documents that create
elements.
And pass here the element name as input.
All right, so all the elements that we needed are already created.
And the next thing I'm going to do is to add the proper attributes for the elements.
Let's take a look on extremophile.
You can see here that both icons have two classes.
We need to add those class names to newly created icon elements.
So let's copy it and go back to JavaScript file and write following first iconoclast name equals and
paste here the class name that we have copied.
Then do the exact same thing for a second icon.
Let's copy class name from Extremophile then write second icon dot class name.
Equals.
And paste here, Klus.
All right, also, we need to do the same thing for input elements that we have created.
We need to assign class name and also set the type attribute for it.
Again, go to a stem of file input element has class name as added note and the type attribute text.
So right, he put that last name.
Equals added note.
And then he put that set attribute.
Right here, type attributes.
And then its value as a text.
OK, as we know, first paragraphs contain the values that are entered into form.
So for the first paragraph, we need to set text content as a value that will be entered in the input.
So.
Right, first dot.
Text content.
Equals Ed input.
And here I'm going to use that value property, so rate value.
OK, the next step is to add those elements to extremophile, so let's start from Eichen elements.
Both of them have the same parent, which is second paragraph.
So we need to add those elements to it using apon child method right here.
Second part, dot apon child.
And he said the parentheses as a parameter, let's insert first icon.
Then duplicate and change for second into second icon.
All right, let's go ahead and now it's time to add paragraphs and input to the elite element.
Again, I'm going to use Upanishads method.
You know, I want to say one thing.
I'm not trying to explain again and again what those methods and properties do, because in previous
lectures, we have described them in details.
And besides the name of most of these methods and properties, tell us what they generally do.
So let's move on and at paragraph at input to the least element.
Right.
I brought up on child.
And then passed the parameter first paragraph.
That's duplicated twice, then change first paragraph into second paragraph and then below change it
into input's.
OK, let's check in cons. what the newly created list looks like, so right, castle, dot, log elai.
That reload type something input and click, so we have Liste element, which contains two paragraphs
and input in first paragraph.
You see the text that we have just typed in input.
All right.
So we are almost done.
But there are still a couple of things to do.
We need to add the least element to the HTML document using its parent element, which we have defined
at the beginning of this lecture.
So we need to write you.
Well, that child.
And then pass the parameter at least.
That's a little page type, something in input again, then click and here we go.
The item is added to the list, but still we have the text and input.
You see that it's not empty.
We have to fix that.
And also, there is another thing that needs to fix.
If we clear the inputs and then click on add button, then the empty item is added to the list.
So in order to fix the first problem, we just need to do a simple thing.
We need to indicate at input value as empty and we need to write each after all of this stuff.
So right below at input dot value.
And make it equal to just rink's.
Don't reloads right here or something and click, so you see that item is added and the input is empty
at the same time.
OK, let's go back and fix the second problem.
For that, we just need to use one conditional statement.
I mean, if statement.
So right after the variable add input if.
Also, I want all of these codes to work when the value of ad input is not empty, therefore, we need
to pass here a very simple condition at input that value.
Not equals.
To empty string.
And also, we need to surround all of these coats by the curly braces of if statement.
All right, let's reload and write something, then click, the item is added and input is empty and
if we click again on button then nothing happens because of the if statement that we have added.
Finally.
OK, congratulations.
Our task is done.
I think that it was interesting for you and you have enjoyed it.
See you in the next video.