WEBVTT 00:01.470 --> 00:07.050 All right, it's time to move on to kind of funny part of our panel section in this election, we're 00:07.050 --> 00:09.420 going to program adding inputs dynamically. 00:09.990 --> 00:12.800 Let's take a look at the finished version of our application. 00:13.380 --> 00:16.890 So as you see, as a default, we have only two inputs. 00:17.280 --> 00:21.000 But when we focus on the last input, then they are added dynamically. 00:21.510 --> 00:23.110 All right, let's do it. 00:23.130 --> 00:26.600 Go to Brackett's for adding inputs. 00:26.610 --> 00:28.240 We're going to create a new method. 00:29.220 --> 00:31.140 This is a part of user interface. 00:31.140 --> 00:35.310 And therefore, this method should be created in UI control module. 00:35.850 --> 00:42.240 In UI controller, we have a written statement for making properties and methods public and our new 00:42.240 --> 00:43.320 method will go here. 00:44.160 --> 00:47.190 I'm going to call this method at inputs dynamically. 00:50.970 --> 00:59.240 Let's assign to it anonymous function, and in order to test it time to time, I'm going to invoke it 00:59.250 --> 01:01.770 for that, I have to go to a controller module. 01:02.490 --> 01:09.360 So write your UI controller DOT and the name of the method at inputs dynamically. 01:12.230 --> 01:19.520 All right, as is so new inputs are added when we focus on less input, so we need an event listener 01:19.520 --> 01:26.030 always to be attached to less input in order to be all of this stuff dynamic, we need to reach on that 01:26.030 --> 01:28.340 last input from the parent element. 01:28.700 --> 01:30.140 I mean, development. 01:31.580 --> 01:33.710 Let's go to index extremophile. 01:35.750 --> 01:42.830 You see that the container has class name admin options container and it actually wraps inputs which 01:42.830 --> 01:45.400 on the other hand, are placed in other dimensions. 01:45.950 --> 01:49.690 So the first thing that I'm going to do is to select mentioned container. 01:50.330 --> 01:58.490 Let's copy the class name of it, then add another property to dump items, object and call it admin 01:58.490 --> 01:59.780 options container. 02:03.670 --> 02:09.510 Then I'm going to use very selective methods, the right document, that query selector. 02:12.860 --> 02:21.920 And paste here, the last name admin options container, so we have selected elements. 02:21.950 --> 02:27.860 And now let's use it in order to access on the last input and then attached to it about listner. 02:28.310 --> 02:33.960 So that's right, dom items, dot admin options container. 02:35.750 --> 02:40.630 Let's again take a look on HTML document in order to access the last input. 02:40.640 --> 02:46.730 At first we need to reach out to its parent element, which is admin option rubber and then from that 02:46.730 --> 02:52.510 div which to last input element for doing that, I'm going to use one of the dump properties. 02:53.210 --> 02:56.480 I believe that you already guessed which one it is. 02:56.530 --> 02:57.790 Last element child. 02:58.130 --> 03:03.480 And in order to access at first on development and then on left input, we need to use it twice. 03:04.010 --> 03:08.840 So write your last element child. 03:11.730 --> 03:13.780 And then again, last element child. 03:15.060 --> 03:20.940 All right, now we have access on lost inputs, and the next thing to do is to attach boundlessness 03:20.940 --> 03:21.330 to it. 03:21.750 --> 03:31.620 So right at even listner as an event type, we need to use focus event so the function will be executed 03:31.620 --> 03:34.350 when we focus on input, like your focus. 03:35.780 --> 03:44.850 As for the function, let's just write the name of it is going to be at input and then let's create 03:44.850 --> 03:47.940 this function right variable. 03:47.940 --> 03:51.120 Add input equals to function. 03:55.010 --> 03:59.630 Let's test how it works, right, consider log works. 04:03.110 --> 04:10.520 Go to the browser, reload, and then focus on last input and see that it works. 04:11.090 --> 04:14.240 OK, fine, we are ready to go. 04:14.420 --> 04:15.040 Let's do it. 04:15.060 --> 04:16.430 This Castle the clock. 04:18.710 --> 04:26.080 In order to create input dynamically with its related radio button, we need to find its HTML from JavaScript. 04:26.600 --> 04:33.590 I'm going to go to index extremophile and grab entire development because it wraps radio button and 04:33.610 --> 04:34.370 input together. 04:34.790 --> 04:46.130 Let's copy it, then declare new variable and call it input HTML and then start this copy to content 04:46.130 --> 04:47.030 in that variable. 04:47.870 --> 04:49.460 So write input html. 04:52.420 --> 04:58.990 We are going to make this content as a string, so let's place your empty quotes and then paste the 04:59.140 --> 05:00.430 e-mail that we have grabbed. 05:03.150 --> 05:05.790 Let's remove these white spaces. 05:08.880 --> 05:09.900 We don't need them. 05:13.060 --> 05:20.010 And now I'm going to remind you how single quotes and double quotes worked together, you see that class 05:20.020 --> 05:25.590 names are surrounded with double quotes, but entire thing is placed within single quotes. 05:26.320 --> 05:28.030 So it's the way how it works. 05:28.420 --> 05:34.540 But if I use double quotes instead of single quotes, then JavaScript engine will recognize this little 05:34.540 --> 05:39.760 part as a string value and then it will find up to that unexpected content. 05:41.890 --> 05:47.580 Let's go to the browser, reload the page and see that we have an error. 05:49.180 --> 05:54.140 Remember that inside the string, if you have something with double quotes, then you need to surround 05:54.160 --> 05:57.030 entire string with single quotes and vice versa. 05:58.390 --> 05:58.990 Makes sense. 06:00.040 --> 06:00.520 All right. 06:01.690 --> 06:04.380 Let's again go back to indexed out of file. 06:05.590 --> 06:07.800 You see that first input's? 06:07.810 --> 06:10.660 I mean, both read your bottom and input for option. 06:11.050 --> 06:18.950 Have the same class name admin option zero and the second input below have class name admin option one. 06:19.630 --> 06:26.450 So we need for every next input which will be added dynamically to increase this number by one word 06:26.530 --> 06:28.540 that I'm going to use a small trick. 06:29.170 --> 06:36.230 At first let's declare new variable, which actually will be like a counter and call it that. 06:37.930 --> 06:43.220 So first input has admin option zero, then second input as admin option one. 06:43.750 --> 06:50.600 So the third input should have admin option to fourth input should have three and so on. 06:51.640 --> 06:57.040 So the perfect way to manage this numbering would be to use length property of admin options. 06:57.040 --> 07:01.840 Not least you see that in DOM item object. 07:01.840 --> 07:09.130 We have already selected admin options, but in this case we cannot use this property because it's enclosure. 07:09.730 --> 07:13.590 It knows about two options which actually are created as a default. 07:13.840 --> 07:18.760 So if we use it here, its length will be always two and it won't help us to. 07:18.760 --> 07:21.640 No inputs properly make sense. 07:23.440 --> 07:28.890 If it's hard to understand, you can post the video for a while and think about it. 07:29.470 --> 07:32.920 But anyway, I will refer to it again in depth a bit later. 07:33.550 --> 07:38.830 So in order to get updated content of this property, we need to select it so. 07:38.830 --> 07:39.400 Right. 07:39.400 --> 07:44.140 That equals to document that Krawitt selector all. 07:47.440 --> 07:57.330 Then right here, the class name DOT admin option, and then we need to use length property, the right 07:57.340 --> 07:58.040 dot length. 07:58.810 --> 08:04.750 All right, so the counter is ready and in order to work it, we need to replace the actual numbers 08:04.750 --> 08:05.800 with that variable. 08:06.490 --> 08:11.570 For that, we need to use single quotes in order to separate different parts of entire string. 08:12.340 --> 08:19.720 So let's build delete one, then place single quotes and then inside them. 08:19.720 --> 08:20.020 Right. 08:20.020 --> 08:22.840 Plus Z and plus again. 08:24.820 --> 08:30.460 Let's copy it and paste instead of numbers. 08:33.500 --> 08:40.820 All right, the next thing that we want to do is to insert this newly created HTML content as a lost 08:40.820 --> 08:42.710 child in admin container. 08:43.910 --> 08:50.090 So at first, let's select dump items, DOT admin options container. 08:50.840 --> 08:55.340 And now I'm going to use New Dawn method, which is very simple to use. 08:55.340 --> 08:58.330 And at the same time, it's very handy and powerful tool. 08:58.730 --> 09:01.700 I'm talking about insert adjacent HTML method. 09:02.780 --> 09:05.530 All right, let's take a look on that article. 09:05.540 --> 09:09.740 It is actually from developer Dot Mozilla dot org website. 09:10.340 --> 09:12.700 You can visit it and introduce this article. 09:13.280 --> 09:18.230 So insert adjacent e-mail method inserts, specified text as HTML. 09:18.920 --> 09:20.560 It takes two parameters. 09:21.050 --> 09:25.670 First one is for position and the second one is for text that we want to insert. 09:26.270 --> 09:34.190 The first parameter position, which is related to select element, defines where you want to place 09:34.190 --> 09:34.610 text. 09:35.690 --> 09:37.460 Let's take a look on that example. 09:37.460 --> 09:39.440 We have here a simple P element. 09:40.010 --> 09:46.190 If we want to place the text before the beginning of aliment, then we need to use before begin value 09:46.190 --> 09:47.090 as a string. 09:47.750 --> 09:51.680 If we want to place after the beginning, then we need to use up to begin. 09:52.100 --> 09:56.210 And in the same way we have two more options before and and after. 09:56.210 --> 10:00.470 And so how do you think which one do we need to use? 10:00.470 --> 10:05.270 In our case, as we said, we need to place HTML content as a last input. 10:05.750 --> 10:08.540 So obviously we need to use before and. 10:09.500 --> 10:15.950 All right, let's go back to Brackett's and write the insert adjacent HTML 10:18.470 --> 10:20.030 and inside the parentheses. 10:20.030 --> 10:20.480 Right. 10:20.480 --> 10:31.550 The first parameter position as before and and then as a second parameter put here the variable input 10:31.620 --> 10:32.180 HTML. 10:33.800 --> 10:36.910 OK, this code should actually work. 10:36.920 --> 10:38.300 Let's go to the browser. 10:40.820 --> 10:50.510 Without that focus on second inputs and you see that new input is added, if I focus on the new inputs, 10:51.410 --> 10:52.480 then nothing happens. 10:53.060 --> 10:57.630 But if I focus again on second input, that new input will be added. 10:58.370 --> 10:59.910 So we don't want it. 10:59.960 --> 11:05.260 We actually want to add inputs when we focus on input for that. 11:05.270 --> 11:12.350 At first we need to remove event listener after focusing on second input and attached it to the newly 11:12.350 --> 11:13.100 created input. 11:13.970 --> 11:19.430 Then again, remove after focusing on third input and attach it to the next and so on. 11:20.540 --> 11:24.650 So again, for now, this input is last element child. 11:25.190 --> 11:27.790 When we focus on that, it changes the position in. 11:28.820 --> 11:36.320 Let's go to Brackett's and write dom items dot admin options container. 11:38.630 --> 11:46.060 So again, we need to access on last element child for now we have access on last development in container. 11:46.190 --> 11:52.920 But at this point there is already added new input and event listener is attached to the previous one. 11:53.540 --> 12:00.790 So in order to remove it, we need to access on the previous input which is placed in div and that is 12:00.800 --> 12:02.150 previous element sibling. 12:02.720 --> 12:06.980 So we need to use here this property rights, previous element sibling. 12:07.820 --> 12:13.820 And now in order to access on our Najid previous input elements, we need to use again. 12:13.850 --> 12:15.410 Last element, child property. 12:18.560 --> 12:25.400 All right, at last, we have access on elements, and in order to remove evangelist's from elements, 12:25.880 --> 12:29.000 there is another method called remove event listener. 12:29.420 --> 12:31.270 This method holds two parameters. 12:31.820 --> 12:36.830 First, one is event type and second one is function, which is actually used in that event. 12:36.830 --> 12:37.220 Listener. 12:37.760 --> 12:38.350 So right. 12:38.630 --> 12:39.920 Remove event listener. 12:42.680 --> 12:51.560 That inside the parenthesis, right focus and then the name of the function at input, so as you see 12:51.560 --> 12:57.560 in both cases we have access on the same element, but because of that, there was dynamically added 12:57.560 --> 12:58.220 new input. 12:58.220 --> 12:59.600 We used different ways. 13:00.290 --> 13:00.710 All right. 13:01.010 --> 13:05.080 Let's go to the browser and test again, reload. 13:06.290 --> 13:10.450 If we focus on second input, then new one will be added. 13:11.300 --> 13:14.250 But if we focus on that again, then it won't happen. 13:15.380 --> 13:18.920 That's because four second focus event listener is all of the remote. 13:20.420 --> 13:21.070 Makes sense. 13:22.340 --> 13:27.500 OK, the only thing that we have to do is to give back event listener to last input element. 13:28.040 --> 13:36.000 So we just need to copy this line and paste it inside, add input function after remote event listener. 13:36.410 --> 13:45.360 Let's again go to the browser and test, reload the page and you see that everything works fine. 13:46.340 --> 13:46.810 All right. 13:47.630 --> 13:48.190 Perfect. 13:49.910 --> 13:56.750 From previous video there is left Castle That Lockyear, which shows us data from local storage when 13:56.750 --> 13:58.020 we click on a button. 13:58.520 --> 14:02.000 So let's go to the browser again and add new questions. 14:03.530 --> 14:08.620 Our goal is to check if data from newly created options is added to the lack of storage. 14:09.590 --> 14:21.380 So let's fill the inputs, then check the correct answer, click to insert and see that newly created 14:21.380 --> 14:24.310 options are not cleared after clicking on reset button. 14:25.100 --> 14:32.420 And also, if we check the data, you will find that those options are not added to the question. 14:33.740 --> 14:38.930 The problem is that JavaScript engine cannot see the updated content of new options. 14:39.740 --> 14:42.050 And the reason is again, enclosure's. 14:43.310 --> 14:45.920 Let's consider in depth what is an actual problem. 14:46.640 --> 14:51.460 Module pattern uses IFIs and they are executed immediately. 14:51.920 --> 14:56.750 So when the UI controller is run the code block inside it is executed. 14:58.310 --> 15:05.120 Dom item variable is ended up in closure and at this point admin options property knows only two inputs 15:05.480 --> 15:12.160 which are created as a default in HTML, and that's why it's not stored dynamically in local storage. 15:14.000 --> 15:14.690 Makes sense. 15:16.770 --> 15:23.670 All right, again, we need to go to control module and reselect doing options, which actually will 15:23.670 --> 15:25.290 give us updated content. 15:26.040 --> 15:31.980 So credit variable and call it admin options then. 15:31.980 --> 15:35.880 Right, documents, dot com selecter all. 15:39.210 --> 15:43.530 And then pushier the class name as DOT admin option. 15:48.330 --> 15:54.480 That you see that mean options, which is a property of dumb items object is actually an argument for 15:54.510 --> 15:56.300 that question on local storage method. 15:57.000 --> 16:01.530 So we need to change it with newly selected options for that. 16:01.530 --> 16:06.270 Let's just the remote selected items and leave only options. 16:06.990 --> 16:07.470 All right. 16:08.340 --> 16:10.100 So now everything should work. 16:10.170 --> 16:17.940 Let's check it, go to the browser, reload the page, then write question right again. 16:17.940 --> 16:18.600 How are you? 16:20.580 --> 16:21.780 Fill the options. 16:22.170 --> 16:22.510 Right. 16:22.530 --> 16:24.120 Fine then. 16:24.690 --> 16:27.210 But then so. 16:27.210 --> 16:30.000 So and the last one. 16:30.180 --> 16:30.870 Fantastic. 16:33.080 --> 16:34.550 Let's check out the correct answer. 16:34.580 --> 16:39.220 Last input, click on insert and you see that every input is cleared. 16:40.130 --> 16:45.200 If we check the data, we will find that in options we have four items. 16:45.560 --> 16:48.140 And as a correct answer, we have the last one. 16:49.310 --> 16:56.000 So finally, we can say that everything works properly, but there are lots of things left that we have 16:56.000 --> 16:56.410 to do. 16:57.080 --> 16:58.120 So let's move on.