WEBVTT 00:01.410 --> 00:07.080 All right, I'm sure that you have tried your best and somehow did this task, as I promised in this 00:07.080 --> 00:09.750 election, I'm going to show you a solution of this task. 00:09.780 --> 00:16.920 Step by step, as we said in previous video, we need to create a new list element with all this, including 00:16.920 --> 00:17.400 elements. 00:18.000 --> 00:22.170 This list element eventually should become one of the members of your element. 00:23.340 --> 00:25.250 And because you will is its parent. 00:26.070 --> 00:28.170 First of all, I'm going to select this element. 00:28.170 --> 00:29.550 So write variable. 00:29.550 --> 00:32.700 You will equals document dot. 00:33.480 --> 00:34.410 Query selector. 00:37.850 --> 00:39.740 And right inside the parentheses, you will. 00:42.970 --> 00:48.940 As you remember, adding items should happen when we click on add button, therefore we need to attach 00:48.940 --> 00:50.530 additional Eastnor on that element. 00:51.610 --> 00:53.810 Let's go to Index DOT HDL. 00:55.840 --> 01:01.870 This element is placed inside the form, as we mentioned, it has the ID attribute at buttons. 01:01.870 --> 01:08.980 So I'm going to use it and select this element, go back to cryptologist file and the right the following 01:09.910 --> 01:14.380 document that gets elements by ID. 01:17.200 --> 01:21.120 Then inside the parentheses indicate the attribute at the bottom. 01:24.950 --> 01:33.170 And then attached to it at event listener right here at event listener inside the parentheses indicate 01:33.170 --> 01:35.030 the event as Kalik. 01:37.650 --> 01:39.090 Then create function. 01:43.120 --> 01:48.700 And now I'm going to test it in council, so it's the culebras, this White Castle dot. 01:49.000 --> 01:49.450 Hello. 01:54.730 --> 02:03.340 Reload, click on add button and you see that it works, but again, because of that, it refreshes 02:03.340 --> 02:04.570 the page on each click. 02:04.990 --> 02:06.200 We need to prevent it. 02:06.790 --> 02:13.780 So use event object and pass it as a parameter in a function and then use prevent default method. 02:14.440 --> 02:18.190 So right e dot prevent default. 02:22.430 --> 02:23.270 Then reload. 02:25.830 --> 02:27.750 Click and it works. 02:29.430 --> 02:31.470 OK, let's remove this council. 02:31.500 --> 02:32.970 We don't need it for now. 02:33.900 --> 02:39.400 The next element that I'm going to use is input elements, so I'm going to select it. 02:39.990 --> 02:47.430 Let's have a look to indicate that extremophile this input element is inside form as well. 02:47.790 --> 02:56.490 It has the ID add input, so let's grab this element using it, attribute, create a variable and call 02:56.490 --> 02:57.480 it at input. 03:00.350 --> 03:03.500 Which equals documents that gets elements by ID. 03:07.370 --> 03:15.890 And pass the ID at input, all right, at this point, we have access on every existing elements and 03:16.130 --> 03:20.240 it's time to go ahead and create the least element with all its including elements. 03:20.480 --> 03:22.670 I mean, pro-growth, I consent and input. 03:23.270 --> 03:31.340 First of all, create variable apply and use, create element methods so right var I equals document 03:32.180 --> 03:37.940 that creates elements and inside the parentheses plus at least element. 03:41.040 --> 03:46.350 Using this method, we also need to create other elements which will be included inside the least element 03:46.920 --> 03:48.600 in order to write the code nicely. 03:48.630 --> 03:55.560 Let's use a shorthand method, which is also a better practice and separate the variables by commas. 03:56.050 --> 03:59.640 In this case, as remember, we don't need to write each time keyword. 04:00.720 --> 04:09.350 So place here, comma, and then take a look on at least elements here. 04:09.360 --> 04:10.750 We have two paragraphs. 04:11.010 --> 04:15.060 First one is for text and second one is for icons. 04:16.230 --> 04:20.070 So let's go back to script or just file and create a first paragraph. 04:20.640 --> 04:22.110 Colleagues first par. 04:24.960 --> 04:29.370 Which equals document, that creates element. 04:34.080 --> 04:37.860 And he said the parentheses indicate paragraph elements. 04:41.440 --> 04:50.950 In the same way, create a second paragraph right to your second power equals documents that create 04:50.950 --> 04:51.460 element. 04:54.820 --> 04:55.180 Pete. 04:57.410 --> 05:05.720 OK, as he noticed, the second paragraph contains two icons, therefore, we need to create them, 05:07.400 --> 05:12.170 so create another variable and name it as first icon. 05:13.760 --> 05:16.100 This icon is for editing the notes. 05:20.140 --> 05:22.450 Right here, document that creates element. 05:25.250 --> 05:27.020 And indicate the elements as I. 05:29.090 --> 05:36.170 Then let's duplicate it and change for a second into second icon. 05:40.980 --> 05:50.280 And the last element we got to create is input, so right here, input equals documents that create 05:50.280 --> 05:50.760 elements. 05:55.490 --> 05:58.910 And pass here the element name as input. 06:00.560 --> 06:05.510 All right, so all the elements that we needed are already created. 06:05.810 --> 06:09.960 And the next thing I'm going to do is to add the proper attributes for the elements. 06:10.900 --> 06:13.070 Let's take a look on extremophile. 06:13.640 --> 06:18.020 You can see here that both icons have two classes. 06:19.400 --> 06:23.540 We need to add those class names to newly created icon elements. 06:23.930 --> 06:36.620 So let's copy it and go back to JavaScript file and write following first iconoclast name equals and 06:36.770 --> 06:39.590 paste here the class name that we have copied. 06:41.360 --> 06:43.940 Then do the exact same thing for a second icon. 06:44.930 --> 06:53.870 Let's copy class name from Extremophile then write second icon dot class name. 06:57.740 --> 06:58.400 Equals. 07:01.070 --> 07:02.570 And paste here, Klus. 07:05.210 --> 07:11.830 All right, also, we need to do the same thing for input elements that we have created. 07:12.350 --> 07:16.300 We need to assign class name and also set the type attribute for it. 07:16.970 --> 07:26.270 Again, go to a stem of file input element has class name as added note and the type attribute text. 07:28.210 --> 07:31.420 So right, he put that last name. 07:34.550 --> 07:35.840 Equals added note. 07:40.560 --> 07:43.290 And then he put that set attribute. 07:47.430 --> 07:48.870 Right here, type attributes. 07:51.690 --> 07:53.760 And then its value as a text. 07:56.630 --> 08:02.850 OK, as we know, first paragraphs contain the values that are entered into form. 08:03.200 --> 08:09.800 So for the first paragraph, we need to set text content as a value that will be entered in the input. 08:11.780 --> 08:12.020 So. 08:12.020 --> 08:13.580 Right, first dot. 08:14.720 --> 08:15.590 Text content. 08:19.550 --> 08:21.200 Equals Ed input. 08:22.010 --> 08:26.300 And here I'm going to use that value property, so rate value. 08:29.180 --> 08:36.140 OK, the next step is to add those elements to extremophile, so let's start from Eichen elements. 08:36.980 --> 08:40.840 Both of them have the same parent, which is second paragraph. 08:40.850 --> 08:46.240 So we need to add those elements to it using apon child method right here. 08:46.250 --> 08:50.150 Second part, dot apon child. 08:54.280 --> 08:59.140 And he said the parentheses as a parameter, let's insert first icon. 09:02.350 --> 09:07.240 Then duplicate and change for second into second icon. 09:11.350 --> 09:17.530 All right, let's go ahead and now it's time to add paragraphs and input to the elite element. 09:18.010 --> 09:20.590 Again, I'm going to use Upanishads method. 09:22.220 --> 09:23.970 You know, I want to say one thing. 09:23.980 --> 09:29.680 I'm not trying to explain again and again what those methods and properties do, because in previous 09:29.680 --> 09:32.030 lectures, we have described them in details. 09:32.470 --> 09:37.760 And besides the name of most of these methods and properties, tell us what they generally do. 09:38.680 --> 09:42.300 So let's move on and at paragraph at input to the least element. 09:42.310 --> 09:42.730 Right. 09:43.330 --> 09:44.830 I brought up on child. 09:48.110 --> 09:51.950 And then passed the parameter first paragraph. 09:54.150 --> 10:04.560 That's duplicated twice, then change first paragraph into second paragraph and then below change it 10:04.560 --> 10:05.610 into input's. 10:07.680 --> 10:16.380 OK, let's check in cons. what the newly created list looks like, so right, castle, dot, log elai. 10:20.390 --> 10:30.410 That reload type something input and click, so we have Liste element, which contains two paragraphs 10:30.410 --> 10:32.990 and input in first paragraph. 10:33.020 --> 10:35.700 You see the text that we have just typed in input. 10:37.460 --> 10:37.960 All right. 10:38.060 --> 10:39.470 So we are almost done. 10:39.470 --> 10:42.010 But there are still a couple of things to do. 10:42.500 --> 10:49.010 We need to add the least element to the HTML document using its parent element, which we have defined 10:49.010 --> 10:50.340 at the beginning of this lecture. 10:50.810 --> 10:52.300 So we need to write you. 10:52.300 --> 10:55.580 Well, that child. 10:59.900 --> 11:02.450 And then pass the parameter at least. 11:04.730 --> 11:12.840 That's a little page type, something in input again, then click and here we go. 11:13.610 --> 11:19.780 The item is added to the list, but still we have the text and input. 11:20.510 --> 11:21.960 You see that it's not empty. 11:22.940 --> 11:24.130 We have to fix that. 11:24.140 --> 11:27.140 And also, there is another thing that needs to fix. 11:27.740 --> 11:35.190 If we clear the inputs and then click on add button, then the empty item is added to the list. 11:36.980 --> 11:41.120 So in order to fix the first problem, we just need to do a simple thing. 11:41.720 --> 11:48.570 We need to indicate at input value as empty and we need to write each after all of this stuff. 11:48.920 --> 11:54.140 So right below at input dot value. 11:58.010 --> 12:01.850 And make it equal to just rink's. 12:04.800 --> 12:16.170 Don't reloads right here or something and click, so you see that item is added and the input is empty 12:16.170 --> 12:16.890 at the same time. 12:18.510 --> 12:22.260 OK, let's go back and fix the second problem. 12:22.270 --> 12:25.460 For that, we just need to use one conditional statement. 12:26.460 --> 12:27.680 I mean, if statement. 12:28.140 --> 12:32.280 So right after the variable add input if. 12:35.930 --> 12:42.370 Also, I want all of these codes to work when the value of ad input is not empty, therefore, we need 12:42.370 --> 12:50.350 to pass here a very simple condition at input that value. 12:53.690 --> 12:54.950 Not equals. 12:57.390 --> 12:58.770 To empty string. 13:02.200 --> 13:07.840 And also, we need to surround all of these coats by the curly braces of if statement. 13:12.520 --> 13:26.380 All right, let's reload and write something, then click, the item is added and input is empty and 13:26.380 --> 13:32.320 if we click again on button then nothing happens because of the if statement that we have added. 13:32.620 --> 13:33.190 Finally. 13:35.540 --> 13:37.610 OK, congratulations. 13:38.390 --> 13:39.590 Our task is done. 13:40.490 --> 13:44.210 I think that it was interesting for you and you have enjoyed it. 13:44.810 --> 13:46.010 See you in the next video.