All right, it's time to move on to kind of funny part of our panel section in this election, we're
going to program adding inputs dynamically.
Let's take a look at the finished version of our application.
So as you see, as a default, we have only two inputs.
But when we focus on the last input, then they are added dynamically.
All right, let's do it.
Go to Brackett's for adding inputs.
We're going to create a new method.
This is a part of user interface.
And therefore, this method should be created in UI control module.
In UI controller, we have a written statement for making properties and methods public and our new
method will go here.
I'm going to call this method at inputs dynamically.
Let's assign to it anonymous function, and in order to test it time to time, I'm going to invoke it
for that, I have to go to a controller module.
So write your UI controller DOT and the name of the method at inputs dynamically.
All right, as is so new inputs are added when we focus on less input, so we need an event listener
always to be attached to less input in order to be all of this stuff dynamic, we need to reach on that
last input from the parent element.
I mean, development.
Let's go to index extremophile.
You see that the container has class name admin options container and it actually wraps inputs which
on the other hand, are placed in other dimensions.
So the first thing that I'm going to do is to select mentioned container.
Let's copy the class name of it, then add another property to dump items, object and call it admin
options container.
Then I'm going to use very selective methods, the right document, that query selector.
And paste here, the last name admin options container, so we have selected elements.
And now let's use it in order to access on the last input and then attached to it about listner.
So that's right, dom items, dot admin options container.
Let's again take a look on HTML document in order to access the last input.
At first we need to reach out to its parent element, which is admin option rubber and then from that
div which to last input element for doing that, I'm going to use one of the dump properties.
I believe that you already guessed which one it is.
Last element child.
And in order to access at first on development and then on left input, we need to use it twice.
So write your last element child.
And then again, last element child.
All right, now we have access on lost inputs, and the next thing to do is to attach boundlessness
to it.
So right at even listner as an event type, we need to use focus event so the function will be executed
when we focus on input, like your focus.
As for the function, let's just write the name of it is going to be at input and then let's create
this function right variable.
Add input equals to function.
Let's test how it works, right, consider log works.
Go to the browser, reload, and then focus on last input and see that it works.
OK, fine, we are ready to go.
Let's do it.
This Castle the clock.
In order to create input dynamically with its related radio button, we need to find its HTML from JavaScript.
I'm going to go to index extremophile and grab entire development because it wraps radio button and
input together.
Let's copy it, then declare new variable and call it input HTML and then start this copy to content
in that variable.
So write input html.
We are going to make this content as a string, so let's place your empty quotes and then paste the
e-mail that we have grabbed.
Let's remove these white spaces.
We don't need them.
And now I'm going to remind you how single quotes and double quotes worked together, you see that class
names are surrounded with double quotes, but entire thing is placed within single quotes.
So it's the way how it works.
But if I use double quotes instead of single quotes, then JavaScript engine will recognize this little
part as a string value and then it will find up to that unexpected content.
Let's go to the browser, reload the page and see that we have an error.
Remember that inside the string, if you have something with double quotes, then you need to surround
entire string with single quotes and vice versa.
Makes sense.
All right.
Let's again go back to indexed out of file.
You see that first input's?
I mean, both read your bottom and input for option.
Have the same class name admin option zero and the second input below have class name admin option one.
So we need for every next input which will be added dynamically to increase this number by one word
that I'm going to use a small trick.
At first let's declare new variable, which actually will be like a counter and call it that.
So first input has admin option zero, then second input as admin option one.
So the third input should have admin option to fourth input should have three and so on.
So the perfect way to manage this numbering would be to use length property of admin options.
Not least you see that in DOM item object.
We have already selected admin options, but in this case we cannot use this property because it's enclosure.
It knows about two options which actually are created as a default.
So if we use it here, its length will be always two and it won't help us to.
No inputs properly make sense.
If it's hard to understand, you can post the video for a while and think about it.
But anyway, I will refer to it again in depth a bit later.
So in order to get updated content of this property, we need to select it so.
Right.
That equals to document that Krawitt selector all.
Then right here, the class name DOT admin option, and then we need to use length property, the right
dot length.
All right, so the counter is ready and in order to work it, we need to replace the actual numbers
with that variable.
For that, we need to use single quotes in order to separate different parts of entire string.
So let's build delete one, then place single quotes and then inside them.
Right.
Plus Z and plus again.
Let's copy it and paste instead of numbers.
All right, the next thing that we want to do is to insert this newly created HTML content as a lost
child in admin container.
So at first, let's select dump items, DOT admin options container.
And now I'm going to use New Dawn method, which is very simple to use.
And at the same time, it's very handy and powerful tool.
I'm talking about insert adjacent HTML method.
All right, let's take a look on that article.
It is actually from developer Dot Mozilla dot org website.
You can visit it and introduce this article.
So insert adjacent e-mail method inserts, specified text as HTML.
It takes two parameters.
First one is for position and the second one is for text that we want to insert.
The first parameter position, which is related to select element, defines where you want to place
text.
Let's take a look on that example.
We have here a simple P element.
If we want to place the text before the beginning of aliment, then we need to use before begin value
as a string.
If we want to place after the beginning, then we need to use up to begin.
And in the same way we have two more options before and and after.
And so how do you think which one do we need to use?
In our case, as we said, we need to place HTML content as a last input.
So obviously we need to use before and.
All right, let's go back to Brackett's and write the insert adjacent HTML
and inside the parentheses.
Right.
The first parameter position as before and and then as a second parameter put here the variable input
HTML.
OK, this code should actually work.
Let's go to the browser.
Without that focus on second inputs and you see that new input is added, if I focus on the new inputs,
then nothing happens.
But if I focus again on second input, that new input will be added.
So we don't want it.
We actually want to add inputs when we focus on input for that.
At first we need to remove event listener after focusing on second input and attached it to the newly
created input.
Then again, remove after focusing on third input and attach it to the next and so on.
So again, for now, this input is last element child.
When we focus on that, it changes the position in.
Let's go to Brackett's and write dom items dot admin options container.
So again, we need to access on last element child for now we have access on last development in container.
But at this point there is already added new input and event listener is attached to the previous one.
So in order to remove it, we need to access on the previous input which is placed in div and that is
previous element sibling.
So we need to use here this property rights, previous element sibling.
And now in order to access on our Najid previous input elements, we need to use again.
Last element, child property.
All right, at last, we have access on elements, and in order to remove evangelist's from elements,
there is another method called remove event listener.
This method holds two parameters.
First, one is event type and second one is function, which is actually used in that event.
Listener.
So right.
Remove event listener.
That inside the parenthesis, right focus and then the name of the function at input, so as you see
in both cases we have access on the same element, but because of that, there was dynamically added
new input.
We used different ways.
All right.
Let's go to the browser and test again, reload.
If we focus on second input, then new one will be added.
But if we focus on that again, then it won't happen.
That's because four second focus event listener is all of the remote.
Makes sense.
OK, the only thing that we have to do is to give back event listener to last input element.
So we just need to copy this line and paste it inside, add input function after remote event listener.
Let's again go to the browser and test, reload the page and you see that everything works fine.
All right.
Perfect.
From previous video there is left Castle That Lockyear, which shows us data from local storage when
we click on a button.
So let's go to the browser again and add new questions.
Our goal is to check if data from newly created options is added to the lack of storage.
So let's fill the inputs, then check the correct answer, click to insert and see that newly created
options are not cleared after clicking on reset button.
And also, if we check the data, you will find that those options are not added to the question.
The problem is that JavaScript engine cannot see the updated content of new options.
And the reason is again, enclosure's.
Let's consider in depth what is an actual problem.
Module pattern uses IFIs and they are executed immediately.
So when the UI controller is run the code block inside it is executed.
Dom item variable is ended up in closure and at this point admin options property knows only two inputs
which are created as a default in HTML, and that's why it's not stored dynamically in local storage.
Makes sense.
All right, again, we need to go to control module and reselect doing options, which actually will
give us updated content.
So credit variable and call it admin options then.
Right, documents, dot com selecter all.
And then pushier the class name as DOT admin option.
That you see that mean options, which is a property of dumb items object is actually an argument for
that question on local storage method.
So we need to change it with newly selected options for that.
Let's just the remote selected items and leave only options.
All right.
So now everything should work.
Let's check it, go to the browser, reload the page, then write question right again.
How are you?
Fill the options.
Right.
Fine then.
But then so.
So and the last one.
Fantastic.
Let's check out the correct answer.
Last input, click on insert and you see that every input is cleared.
If we check the data, we will find that in options we have four items.
And as a correct answer, we have the last one.
So finally, we can say that everything works properly, but there are lots of things left that we have
to do.
So let's move on.