WEBVTT 00:02.550 --> 00:08.610 So in previous lecture, we have learned how to create a question list when we ask questions, then 00:08.760 --> 00:11.170 they appear below in question. 00:11.190 --> 00:16.890 This rapper, each question on the right side has a button for added, which actually doesn't work at 00:16.890 --> 00:17.370 this point. 00:18.090 --> 00:20.280 Let's see what we are going to do in this lecture. 00:20.670 --> 00:23.610 Let's take a look one more time on our finished application. 00:24.480 --> 00:27.060 At first, I'm going to add a question. 00:28.700 --> 00:35.330 So when I click on edit button, the contents of question with its proper options appear in working 00:35.330 --> 00:35.660 mode. 00:36.230 --> 00:41.790 We are able to ask the question text and the options as well, change the correct answer. 00:42.140 --> 00:45.980 And after that, update the question or even deleted from a question list. 00:46.730 --> 00:48.950 So we are going to program this stuff. 00:49.520 --> 00:52.900 Editing questions include some complicated things and tricky ways. 00:53.300 --> 00:58.220 So you should be more concentrated in order to avoid confusion and misunderstanding. 00:58.760 --> 01:03.320 But you do not have to worry much because I'm going to explain everything step by step in that. 01:04.040 --> 01:04.520 All right. 01:06.030 --> 01:13.050 Let's go back to Brackett's from the previous lecture, you know that we have used IDs, which are properties 01:13.050 --> 01:18.620 of question, objects from local storage, and those IDs make each edit button unique. 01:19.170 --> 01:23.250 So we will use this ID in order to distinguish added buttons from each other. 01:23.460 --> 01:27.430 And also it will help us to get specified question objects from local storage. 01:27.990 --> 01:34.050 So the first thing that we are going to do is to set up listener so that let's use current element, 01:34.500 --> 01:39.580 which in this case is inserted questions Rupo and attached to it at Event Listener. 01:39.990 --> 01:42.120 We have to do it in a controller module. 01:43.020 --> 01:47.880 The needed element inserted question rubber is already selected so. 01:47.880 --> 01:50.580 Right selected items. 01:51.870 --> 01:53.880 Doctors inserted questions rapper. 01:55.410 --> 01:57.600 And then attach an event listener. 01:59.970 --> 02:02.310 Inside parentheses, right click event. 02:03.540 --> 02:08.760 And I'm going to use your anonymous function, and in this function, we will involve method for editing 02:08.760 --> 02:11.520 questions, which will hold some arguments. 02:12.960 --> 02:17.910 Here we need to use event object, which will actually help us to find correct elements from questionable. 02:19.250 --> 02:25.760 All right, so the event listener is attached, and now it's time to create method for editing questions, 02:25.760 --> 02:32.090 which will be the part of the UI controller module, the right writer added question list. 02:35.050 --> 02:37.720 Then assigned to it anonymous function. 02:39.520 --> 02:45.280 This function will hold several parameters as the first one, I'm going to pass your events, which 02:45.280 --> 02:51.820 represents an event object, and then in order to get access on local storage, let's write another 02:51.820 --> 02:55.660 parameter and call it storage question list. 02:59.640 --> 03:05.600 All right, the next thing that we're going to do is to invoke this method, we have to do it in control 03:05.700 --> 03:07.720 module inside and on this function. 03:08.100 --> 03:08.550 So. 03:08.550 --> 03:09.000 Right. 03:09.000 --> 03:10.110 You control the. 03:11.060 --> 03:13.340 That added question list. 03:15.360 --> 03:21.420 So the first parameter was event for event object, therefore, as a first argument, we have to pass 03:21.780 --> 03:22.110 it. 03:23.720 --> 03:30.440 And for the second argument, we need to get access on local storage, so let's right to your controller 03:31.100 --> 03:33.350 that gets question local storage. 03:35.360 --> 03:41.660 OK, now it's time to test and see how it works, let's go back to the question, what is the method? 03:42.570 --> 03:45.750 And right inside Castlewood Log. 03:47.350 --> 03:47.950 Event. 03:49.680 --> 03:51.900 And then storage question least. 03:54.100 --> 03:56.830 Also, we have about another consulate like. 03:58.100 --> 03:59.290 Let's get rid of it. 04:01.010 --> 04:02.650 Then go to the browser. 04:03.710 --> 04:04.640 Reload the page. 04:06.500 --> 04:12.110 You know, that at event listener is attached to the entire inserted question repr, therefore when 04:12.110 --> 04:16.990 I click on any place that the event fires and function is invoked. 04:17.510 --> 04:23.390 So you see in counsel that we have a mouth event object and then local storage object. 04:24.050 --> 04:25.630 All right, fine. 04:26.180 --> 04:31.040 But in this case, we want to run the code only in case of clicking on edit button. 04:31.880 --> 04:34.310 For that we have to use if statement. 04:35.610 --> 04:41.200 In which we will use some tricky ways in order to execute codes for every button. 04:41.220 --> 04:48.120 I'm going to use I'd attribute an index of the method so we know that I'd attribute is different for 04:48.120 --> 04:52.520 every question element because they got different numbers from local storage. 04:53.070 --> 04:59.710 But at the same time, all the elements have same part of attributes, which is question dash. 05:00.300 --> 05:04.350 So right here, question and dash. 05:06.110 --> 05:12.340 Then we need to use index of method in order to define if I'd attribute of cliqued elements includes 05:12.470 --> 05:15.590 question and dash writes DOT index of. 05:18.660 --> 05:25.020 And then inside parentheses, we have to indicate ID of clicked element object so that I'm going to 05:25.020 --> 05:28.140 use no way so right events. 05:29.160 --> 05:31.050 And use your target property. 05:32.330 --> 05:33.890 And then Ida. 05:36.100 --> 05:42.760 So if a user has clicked on element, which contains I'd attribute with the following characters, I'm 05:42.760 --> 05:46.260 in question and dash, then this condition will be true. 05:47.390 --> 05:48.060 Makes sense. 05:48.950 --> 05:53.750 OK, let's test again right inside that log. 05:54.850 --> 05:55.870 Events, dot. 05:57.200 --> 05:59.030 Targets dot ID. 06:01.610 --> 06:03.040 Then go to the browser. 06:04.470 --> 06:05.130 Revolt. 06:06.250 --> 06:13.900 Click on any place except add button and see that nothing happens because condition in each statement 06:13.900 --> 06:14.460 is false. 06:15.420 --> 06:20.850 But if we click on Add to the bottom of that, we will get question that zero. 06:22.250 --> 06:25.090 OK, let's add another question. 06:28.180 --> 06:35.200 Then click on new questions, edit button and we have a question, that one. 06:36.170 --> 06:38.120 All right, great. 06:38.150 --> 06:44.570 It works fine in order to update or delete question, first of all, we need to find out on which item 06:44.570 --> 06:51.470 from local storage should we perform those actions so that we are going to use from I'd attribute I 06:51.470 --> 06:56.210 mean, for example, from question Dasch zero, the second part number. 06:56.720 --> 07:02.270 And the great way to do that is to use one of the built-In string methods in JavaScript, which is called 07:02.270 --> 07:02.780 split. 07:03.440 --> 07:06.190 Before we use it, let's demonstrate how it actually works. 07:06.710 --> 07:10.370 For that, let's go to browser and use console. 07:11.830 --> 07:17.020 Create a variable and assigned to it as a string question, that zero. 07:18.290 --> 07:20.090 Which we got in one of our cases. 07:21.830 --> 07:25.460 Then use a split method, Rite Aid to split. 07:27.110 --> 07:33.020 Inside parentheses, we need to indicate the character on which should be performed, split, let's 07:33.020 --> 07:33.920 use Desh. 07:35.600 --> 07:41.010 And you see that we have an array which consists of two items, question and zero. 07:41.870 --> 07:45.980 Both of them are represented as rings and the dash itself is remote. 07:46.460 --> 07:48.810 So this is a way houseplant split method works. 07:49.580 --> 07:54.970 We're going to use this method in our case in order to get no part of the attribute. 07:55.580 --> 07:58.090 First of all, we need to declare a new variable. 07:58.640 --> 08:01.310 Let's call it gets ID. 08:03.430 --> 08:10.180 Then inside, if statement to use this variable and assign to it no part of the attribute which will 08:10.180 --> 08:15.100 be defined using split method, right event dot target. 08:16.770 --> 08:17.700 Dot ID. 08:19.350 --> 08:20.490 Van der split. 08:21.550 --> 08:23.260 And inside parentheses. 08:24.380 --> 08:25.790 Plus, Desh. 08:27.190 --> 08:33.940 As we saw in previous example in council, we got a using a split method and the number was its second 08:33.940 --> 08:34.350 item. 08:34.780 --> 08:39.310 So in order to get this second item, you know that it has index number one. 08:39.730 --> 08:40.660 So that's right. 08:40.660 --> 08:42.310 Inside square brackets one. 08:45.030 --> 08:47.730 Let's see what variable gets it looks like. 08:48.880 --> 08:51.370 Writing consent to get ID. 08:53.000 --> 08:55.940 Go to the browser and reload. 08:57.430 --> 08:59.020 Then click on add buttons. 09:00.550 --> 09:08.130 And you see that we got here zero and one, we got numbers, but actually they have data type as a string. 09:08.740 --> 09:11.490 I want to transform them into numbers for that. 09:11.500 --> 09:18.550 There is another built in method in JavaScript called Pass Int, which converts string into number and 09:18.550 --> 09:20.370 returns it as an integer. 09:21.160 --> 09:24.160 So let's use your powers eight. 09:26.270 --> 09:29.060 And surround all of this stuff with parentheses. 09:31.800 --> 09:34.080 OK, let's see again in browser. 09:35.920 --> 09:36.910 Reloader page. 09:38.080 --> 09:39.520 Click on added buttons. 09:40.600 --> 09:48.550 And we have here again, zero and one, but with data type as number, because their color is changed 09:48.550 --> 09:49.130 in council. 09:49.570 --> 09:50.520 All right, fine. 09:51.770 --> 09:54.220 Let's delete this dialogue. 09:55.960 --> 10:02.410 So the next step is to find out which question object in local storage contains this ID so that we have 10:02.410 --> 10:09.190 to get access on local storage and then use follow in order to figure out which question object should 10:09.190 --> 10:10.720 be updated or deleted. 10:11.410 --> 10:14.170 First of all, I'm going to declare a new variable. 10:14.950 --> 10:18.640 Let's call it gas storage question list. 10:23.020 --> 10:30.880 In order to minimize the amount of code, I'm going to use this variable and then assigned to it storage 10:31.300 --> 10:32.170 question list. 10:34.340 --> 10:36.200 That's gets question collection. 10:38.860 --> 10:45.340 So we have access on an array in local storage, which includes question objects, and now I'm going 10:45.340 --> 10:51.010 to use falbe rights for verbalised equals to zero. 10:52.280 --> 10:58.370 Then, right, the condition is less than the length of that storage question list. 11:02.210 --> 11:03.620 And then I plus plus. 11:08.160 --> 11:15.550 Now we need to get an item which will have the same value of Idy property as gets it for that, again, 11:15.600 --> 11:18.570 we need to use if statements, right, if. 11:19.870 --> 11:21.160 Storage question least. 11:22.460 --> 11:25.250 Then the variable I thought I'd. 11:27.070 --> 11:29.320 Triple A equals to get Edem. 11:32.990 --> 11:40.310 Then we need to save this item into variable, let's at first declare a new variable and call it found 11:40.310 --> 11:40.850 item. 11:44.490 --> 11:46.410 Then use this variable. 11:49.470 --> 11:57.210 And assigned to it found an item which was defined by its statement, so right, get storage question 11:57.210 --> 11:58.530 list I. 12:01.590 --> 12:07.340 All right, the next thing that we are going to do is to define the actual place of found item in Iran, 12:07.980 --> 12:14.280 we have to do it because in case of updates of question, we need to get back the question item on its 12:14.280 --> 12:15.200 original place. 12:15.630 --> 12:21.450 For example, if we want to update the second question after update, it should be placed as second 12:21.450 --> 12:23.040 question again in question list. 12:24.430 --> 12:25.080 Makes sense. 12:27.340 --> 12:32.650 I understand that it may be confusing and hard for you, especially if your new in JavaScript good, 12:33.250 --> 12:37.080 but at the same time I'm trying to do my best and explain things in detail. 12:37.480 --> 12:39.730 So I hope that you understand everything. 12:40.530 --> 12:41.770 OK, let's move on. 12:41.770 --> 12:45.730 Anticolonial variable and call it place in Ouray. 12:49.010 --> 12:55.340 And then inside, if statement you place in array and assign to it the variable I. 12:58.100 --> 13:06.050 All right, let's see again in Castle how those variables work right outside of Falu Castle, that lock. 13:08.380 --> 13:09.340 Found item. 13:10.660 --> 13:12.400 And that place in a right. 13:15.640 --> 13:18.490 Then go to the browser reload page. 13:20.360 --> 13:21.910 Click on added buttons. 13:23.010 --> 13:27.900 And he said that we have questioned item from Iran and its actual place in that area. 13:28.740 --> 13:30.620 All right, perfect. 13:31.500 --> 13:34.560 It's time to display the question whether it's proper options. 13:34.560 --> 13:43.340 When we click on edit button, let's assign to new question text as a value question, text or phone 13:43.350 --> 13:43.830 item. 13:45.070 --> 13:48.730 Let's remote control the and write dumb items. 13:50.570 --> 13:52.610 That's new question text. 13:54.950 --> 13:55.730 Dutch value. 13:58.000 --> 13:59.770 Equals to found item. 14:00.940 --> 14:02.080 Good question. 14:02.110 --> 14:02.500 Text. 14:05.600 --> 14:09.620 Let's see how it works, go to browser, reload the page. 14:10.750 --> 14:12.250 And click on Added. 14:13.700 --> 14:17.210 So you see that the proper question text appeared in text area. 14:18.140 --> 14:22.160 All right, in the same way, we need to display the proper options for question. 14:24.000 --> 14:28.890 But at first, we need to clear them and then assign the proper values to them over again. 14:29.670 --> 14:32.220 Let's take a look on Endecott Extremophile. 14:33.710 --> 14:39.300 The inputs for options are inside of which we have already selected previously. 14:39.830 --> 14:41.330 So let's use this element. 14:42.670 --> 14:43.140 Right. 14:44.290 --> 14:45.250 Don't items. 14:46.830 --> 14:50.040 Dot admit options container. 14:52.290 --> 14:54.630 And then use in your property. 14:57.310 --> 14:58.930 Equals two to three. 15:00.590 --> 15:06.970 So now, in order to assign the values to options over again, I'm going to use follow. 15:09.350 --> 15:16.940 Let's use your variable X because I is already used like variable X equal to zero as a condition. 15:16.970 --> 15:21.560 We need to compare X to length of options of found item. 15:21.980 --> 15:24.860 The right X is less than found. 15:24.860 --> 15:27.200 Item dot options. 15:28.510 --> 15:28.960 Dr.. 15:31.460 --> 15:33.050 And then X plus plus. 15:35.230 --> 15:41.890 OK, the next step is to create content for each option, for that, I'm going to declare a new variable 15:42.310 --> 15:45.210 and colleagues option HTML. 15:46.620 --> 15:52.910 I call it option because I'm going to grab again the content of this variable from HMO documents. 15:53.820 --> 15:56.520 So let's go back to the HMO file. 15:57.660 --> 16:04.740 We need to copy development, which actually is admin option repr with its including input elements. 16:06.250 --> 16:13.000 Then go back to cryptologist file and assign it to option HDMI variable. 16:15.280 --> 16:20.590 Again, I'm going to remove these white spaces from here. 16:26.100 --> 16:33.600 Because of that, we don't meet on each iteration to change the content of option XHTML, but to collect 16:33.600 --> 16:38.010 them for that we have to use plus sign before equals sign. 16:40.780 --> 16:45.970 OK, you see here that inputs have the class names, admin option zero. 16:46.880 --> 16:54.380 We need to change these numbers dynamically using the variable X so that Spillett zeroth. 16:56.120 --> 16:56.570 Then. 16:57.680 --> 16:59.510 Place, empty, single quotes. 17:00.660 --> 17:04.110 And then right, plus X plus. 17:06.740 --> 17:13.700 And the last thing here to change is the value of option and input, we have to pass the content of 17:13.700 --> 17:18.290 option of item, place empty quotes and right plus. 17:19.710 --> 17:20.640 Found item. 17:21.770 --> 17:22.700 Good options. 17:24.660 --> 17:26.760 X and then plus again. 17:28.400 --> 17:32.550 All right, the content of option e-mail is almost ready. 17:33.200 --> 17:38.090 Let's test it right, Castle, that log. 17:40.010 --> 17:41.320 Option e-mail. 17:43.950 --> 17:45.150 Go to the browser. 17:46.400 --> 17:47.330 Reload the page. 17:48.480 --> 17:53.610 Click on edit and you see that we have entire original content. 17:54.550 --> 17:57.680 But at the beginning of this value, there is undefined. 17:58.570 --> 18:00.000 Actually, it's not a surprise. 18:00.010 --> 18:05.930 We know that when we declare the variable JavaScript engine automatically assigns to it undefined. 18:06.490 --> 18:11.270 So in order to fix that, we have just to assign to option html amp to string. 18:11.830 --> 18:14.020 So right before for loop. 18:14.920 --> 18:16.200 Option HDMI. 18:17.630 --> 18:19.130 Equals two to three. 18:20.830 --> 18:22.120 Go to the browser again. 18:23.380 --> 18:24.280 Reloader page. 18:25.870 --> 18:27.100 Click on Added. 18:28.440 --> 18:30.210 And you see that it's fixed. 18:31.320 --> 18:33.010 OK, great. 18:34.060 --> 18:39.510 And now it's time to display proper values of option one, we click on added button. 18:39.630 --> 18:40.060 Let's. 18:41.140 --> 18:44.400 Copy it and paste after for a loop. 18:46.570 --> 18:50.800 And instead of empty quotes assigned to the variable option, HDMI. 18:53.370 --> 19:02.490 Let's delete the log, then go back to your browser again, reload the page, click on ads and see that 19:02.490 --> 19:08.010 the entire question with question, text and proper options are displayed, OK? 19:09.260 --> 19:10.120 Really cool, right? 19:11.510 --> 19:18.830 So it works, but here we have a little problem when we focus on Luss inputs, new inputs are not added 19:18.830 --> 19:19.460 dynamically. 19:21.060 --> 19:24.900 In order to fix that problem, we have to pass another parameter in function. 19:26.390 --> 19:28.640 Actually, this parameter will be a function. 19:29.680 --> 19:36.040 Thanks to first class functions in JavaScript, which you already know, we have ability to pass functions 19:36.040 --> 19:37.210 as arguments. 19:38.320 --> 19:44.860 OK, let's call this parameter at input's dynamically function, right, it's in kind of shot way. 19:47.640 --> 19:54.930 Then go to the controller module and as an argument, you're our known method. 19:56.180 --> 20:00.020 UI controller dot at input's dynamic. 20:01.150 --> 20:05.590 And then call it inside if statements. 20:08.100 --> 20:11.250 Right below at input's, dynamically function. 20:13.970 --> 20:14.990 Go to the browser. 20:16.070 --> 20:16.640 Reload. 20:18.190 --> 20:19.180 Click on edit. 20:20.650 --> 20:25.990 Then focus on lost inputs and see that they are added dynamically. 20:26.740 --> 20:27.190 OK. 20:28.170 --> 20:35.790 We are almost done, the only thing is to display updates and delete buttons from success by default, 20:35.790 --> 20:39.260 they are hidden, so we need to change their styles. 20:40.530 --> 20:42.690 At first, let's select these elements. 20:45.130 --> 20:52.630 So you see here two buttons for updates and police, they have proper I.D. attributes, question, update 20:53.150 --> 20:55.270 and questionability PETN. 20:57.100 --> 20:58.360 Let's couple the first one. 21:00.160 --> 21:08.200 Then inside dome items, object creates another property and colleagues question, update an. 21:11.200 --> 21:15.490 Then right document that gets aliments by ID. 21:18.050 --> 21:21.140 And then paste your ID question update at. 21:23.450 --> 21:28.490 That creates property for delete button and colleagues question delete button. 21:32.680 --> 21:34.680 Then copy it. 21:36.490 --> 21:37.030 And. 21:38.850 --> 21:40.980 Change update into undelete. 21:43.880 --> 21:44.360 All right. 21:45.360 --> 21:50.940 So we have selected both buttons, now it's time to change their styles and make them visible. 21:52.090 --> 21:57.910 Four for that's right, Dom items start question update with an. 21:59.560 --> 22:00.370 Dot style. 22:03.160 --> 22:07.360 And use your success, property visibility. 22:09.510 --> 22:11.490 Which equals to visible. 22:14.450 --> 22:18.170 Let's copy it and change updating to delete. 22:22.120 --> 22:29.380 And also, when we click on edit button, we want to highlight insert button, so that selected as well, 22:30.070 --> 22:31.390 right, DOM items. 22:33.260 --> 22:34.880 That question is with the. 22:37.660 --> 22:38.410 That style. 22:39.700 --> 22:41.260 Dot visibility. 22:44.470 --> 22:45.880 Equals two hidden. 22:49.890 --> 22:55.920 All right, so we are done, let's go to browser, reload the page. 22:57.670 --> 22:58.570 Click on Added. 22:59.970 --> 23:05.340 And you see that buttons for updates and leads are visible and insert button is hidden. 23:07.080 --> 23:08.820 OK, perfect. 23:09.300 --> 23:10.660 It's enough for this video. 23:10.830 --> 23:15.510 I know that it was a little bit long one, but I'm sure that you have learned a lot. 23:16.140 --> 23:17.060 So let's move on.