WEBVTT 00:01.510 --> 00:07.210 So we have already prepared the questions for change the question, text options and correct answer, 00:07.450 --> 00:10.270 and now it's time to give some functionality to update button. 00:10.810 --> 00:16.410 Before we do that, I want in advance to disable clear at least button during editing the question. 00:16.990 --> 00:20.080 I know that at this point it doesn't have any functionality. 00:20.080 --> 00:22.690 But regardless of that, let's disabled this button. 00:22.690 --> 00:22.940 No. 00:23.570 --> 00:25.390 OK, let's go to Brackett's. 00:25.390 --> 00:28.450 The first thing that we have to do is to select this element. 00:29.200 --> 00:31.870 Let's take a look on index dot file. 00:33.680 --> 00:40.640 After insert button, we have here button for a clear list, it has, I'd attribute questions clear 00:40.970 --> 00:46.940 and so let's copy it and then in dump items object. 00:47.890 --> 00:53.230 Create another property and call it Questions Carlier BGN. 00:54.740 --> 00:57.230 Then selected rights documents. 00:58.330 --> 01:00.280 Dogs, cats, elements by IDI. 01:02.610 --> 01:06.830 And paste your ID questions clear at. 01:09.230 --> 01:14.510 As we said, we want to dissect this button during editing the questions, therefore we're going to 01:14.510 --> 01:17.330 do it inside a. question list function. 01:17.900 --> 01:21.040 In order to disrupt the button, we need to change its style. 01:21.620 --> 01:23.420 So writes Dom items. 01:24.500 --> 01:27.200 That question's clear between. 01:29.170 --> 01:30.140 The old style. 01:31.790 --> 01:39.010 In says we have a property called Pointier Events, which manages how HTML elements act on most events. 01:39.440 --> 01:42.230 So let's use this property right pointer events. 01:44.280 --> 01:48.720 If we want to disturb the button, we need to assign to this property the value none. 01:51.340 --> 01:56.050 OK, let's go to the browser and see how it works, reload. 01:57.590 --> 01:59.270 Then click on edit button. 02:01.300 --> 02:06.110 So when we hover on Khelil this button, it doesn't have Hubber effect anymore. 02:06.520 --> 02:08.000 It means that it's disabled. 02:08.890 --> 02:12.690 All right, now it's time to start updating the questions. 02:12.700 --> 02:17.150 The first thing that we're going to do is to attach click event on update button. 02:17.650 --> 02:22.570 This is the case when it's more convenient to use event handler instead of event listener. 02:23.140 --> 02:28.390 As you know, in case of an event, listener element can hold several events. 02:28.840 --> 02:33.790 But at this point, we want update button to hold only one event. 02:34.860 --> 02:39.780 Anyway, you can feel free and use that event listener, and I'm sure that you will get better what 02:39.780 --> 02:40.510 I'm talking about. 02:41.160 --> 02:43.560 OK, let's write don't items. 02:45.160 --> 02:47.830 That question update PTM. 02:49.930 --> 02:51.160 But unclick. 02:53.600 --> 03:00.620 For updating questions, we are going to create function and let us in advance call it updates question. 03:03.000 --> 03:09.990 And then create the mansion function as function expression, so create the variable and colleagues 03:09.990 --> 03:10.920 update question. 03:13.020 --> 03:15.430 The then assigned to its anonymous function. 03:18.840 --> 03:25.650 And now let's test how this updated question function works right inside it, that log. 03:28.360 --> 03:28.870 Works. 03:30.860 --> 03:32.180 Then go to the browser. 03:33.250 --> 03:38.770 Reload the page, click on edit button, then click on update. 03:39.720 --> 03:41.130 And they say that it works. 03:41.910 --> 03:47.640 OK, now we want to write the code, which will update question item in local storage. 03:48.180 --> 03:52.260 For that, we want to update the contents of found item variable. 03:52.750 --> 04:00.600 Let's change the question text of item four that we have to wait for an item that question text. 04:03.220 --> 04:05.290 Equals to dump items. 04:06.550 --> 04:08.230 That new question text. 04:10.060 --> 04:10.960 That value. 04:13.460 --> 04:20.110 So in case of clicking on edit button, we assign question tags, the phone item to new question tags 04:20.120 --> 04:27.110 of the value, but in case of clicking on update button, we need to assign to question, text or phone 04:27.110 --> 04:32.240 item the value of new question text, which is the content of text area. 04:33.600 --> 04:34.220 Makes sense. 04:35.840 --> 04:42.710 OK, in order to see better and understand it, well, I'm going to test it, let this play in council 04:43.310 --> 04:46.570 found item from outside of function, right? 04:46.590 --> 04:48.470 Concerned that log found item. 04:50.030 --> 04:56.540 It means that this line of code will run when we click on edit button and also that display found item 04:56.540 --> 04:58.670 from inside update question function. 04:59.270 --> 05:00.950 So right for item. 05:03.240 --> 05:09.330 It means that this council, that luck will run when we click on update button, let's go to the browser. 05:10.400 --> 05:11.000 Reloj. 05:12.070 --> 05:13.570 Then click on edit button. 05:14.760 --> 05:18.900 So you see that we have here question whether it's actual content. 05:20.570 --> 05:25.460 Now, let's change the question, text and write, for example, updated. 05:27.490 --> 05:28.900 Then click on update. 05:29.900 --> 05:32.450 And it said that the text of question is changed. 05:33.870 --> 05:37.030 OK, let's check what happens in local storage. 05:37.530 --> 05:39.030 Go to the application. 05:41.980 --> 05:46.280 So you said that in local storage question has its old content. 05:47.140 --> 05:52.780 It's not surprise because we didn't touch local storage, we just changed the content of found item 05:52.780 --> 05:53.280 variable. 05:54.010 --> 05:59.650 So, you know, that content of phone item we got from local storage and after updating its content, 06:00.070 --> 06:02.920 we have to get back to local storage as updated. 06:03.730 --> 06:04.180 All right. 06:04.390 --> 06:05.650 Let's go back to Brackett's. 06:05.650 --> 06:09.970 And at first, Delate, this castle that logs. 06:11.630 --> 06:16.150 The next that we want to do is to set correct cell phone item as empty. 06:16.820 --> 06:20.840 If we do not do it, then we won't be able to validate it. 06:23.050 --> 06:27.820 So right, found item Dodd, correct answer. 06:29.030 --> 06:31.190 Equals two to three. 06:32.350 --> 06:39.670 So we have updated question text and made correct answer as empty, and now it's time to update options 06:40.240 --> 06:46.800 for that, we are going to create an empty array and then in that area, we will collect new options 06:47.260 --> 06:51.520 such as be clear, new variable and call it new options. 06:53.640 --> 06:56.250 And then assign to this variable. 06:57.220 --> 06:58.440 And empty erate. 06:59.540 --> 07:07.490 All right, now we need to select options, actually, they are selected, but we want to select them 07:07.490 --> 07:15.770 in order to get updated number of options for that, let's declare new variable and call it option elements. 07:17.210 --> 07:20.030 Then go to donate items object. 07:23.030 --> 07:25.160 And copy this line. 07:27.170 --> 07:30.290 And assign age to option elements variable. 07:35.260 --> 07:41.890 OK, so the next steps that we are going to do are very similar to the code, which we have written 07:41.890 --> 07:47.600 in Ed's question on lack of storage function, but they will be slightly different. 07:48.520 --> 07:54.910 So the next thing that we have to do is to add options to new options array and also define the correct 07:54.910 --> 07:55.360 answer. 07:55.780 --> 07:56.130 For that. 07:56.140 --> 07:58.480 I'm going to use for loop, so. 07:58.480 --> 08:02.020 Right for then variable equal to zero. 08:03.220 --> 08:04.390 As a condition. 08:06.110 --> 08:10.310 Right eye is less than the length of option elements. 08:13.220 --> 08:15.350 And then I plus plus. 08:17.850 --> 08:25.170 So if the value of options is not empty, then it should be added as a new option to new options. 08:25.200 --> 08:25.560 All right. 08:26.540 --> 08:28.790 For that, we have to use its statement. 08:30.420 --> 08:32.190 And as a condition. 08:33.350 --> 08:35.180 That's right, option elements. 08:37.290 --> 08:38.940 I got value. 08:41.310 --> 08:42.330 Not equals. 08:44.340 --> 08:45.330 Two empty calls. 08:48.380 --> 08:55.310 So if this condition is true, it means that value of option is not empty, therefore, we need to add 08:55.310 --> 08:56.930 it to new options are right. 08:57.470 --> 09:01.160 For that, let's use push method, write new options. 09:02.520 --> 09:03.390 That push. 09:05.380 --> 09:10.510 And as a parameter, let's place your option elements I. 09:11.890 --> 09:12.730 That value. 09:15.170 --> 09:21.800 All right, now it's time to define the correct answer for that, we need another if statement which 09:21.800 --> 09:23.600 will go inside the previous one. 09:24.720 --> 09:31.320 So as a condition, we need to indicate the proper radio button, as Chad, as you remember, radio 09:31.320 --> 09:36.470 buttons are placed in HTML document as previous siblings for text inputs. 09:37.380 --> 09:44.250 So we need to use donor property called previous element sibling and then the property checked, which 09:44.250 --> 09:45.830 returns boolean value. 09:45.990 --> 09:46.860 True or false. 09:47.520 --> 09:48.900 Right option elements. 09:49.890 --> 09:50.370 I. 09:52.400 --> 09:54.110 That previous element, sibling. 09:57.980 --> 10:00.140 And then use checked property. 10:02.270 --> 10:08.930 So if this condition is true, it means that the proper radio button is checked and on that iteration 10:09.140 --> 10:10.640 we have a correct answer. 10:11.930 --> 10:15.980 So right found item, that correct answer. 10:18.240 --> 10:20.110 Equals to option elements. 10:20.670 --> 10:21.690 I got value. 10:24.880 --> 10:31.450 OK, the last step for preparing for an item is to assign to it new options. 10:31.490 --> 10:38.680 All right, let's do it outside Falluja and write an item dot options. 10:40.390 --> 10:42.090 Equals two new options. 10:44.870 --> 10:51.080 All right, phone item is already appropriate, and the next step is to insert it in local storage on 10:51.080 --> 10:53.250 its original place for that. 10:53.270 --> 10:56.690 At first we need to get access on a question list from local storage. 10:58.350 --> 11:03.810 In previous video, we have thought it in get storage question list, so let's use this variable. 11:06.540 --> 11:13.590 Now we have access on Erra in local storage, and in order to insert Funt item, we have to use another 11:13.590 --> 11:17.310 builtin array method in JavaScript, which is called Pliss. 11:20.170 --> 11:27.820 Let's briefly demonstrate in council how this place works, create an array and colleague Carlos. 11:28.940 --> 11:33.710 Then pushier some colors, for example, of red than green. 11:34.690 --> 11:36.220 And below. 11:39.120 --> 11:46.470 Let's suppose that we want to delete, for example, second item Charin four, that we can write colors 11:46.980 --> 11:48.270 that supplies. 11:50.500 --> 11:53.110 This method holds at least two parameters. 11:53.380 --> 11:59.740 The first one indicates the position of item from where you want to delete the item, and the second 11:59.740 --> 12:02.290 one indicates how many items you want to delete. 12:02.950 --> 12:05.220 So in this case, we want to delete green. 12:05.740 --> 12:08.800 Therefore, as a first parameter, we need to place one. 12:10.110 --> 12:16.800 And because of that, we want to delete only one item as a second parameter, we need to pass one again. 12:18.840 --> 12:26.250 So you see that we have new era, which includes the deleted item, but if we check our colors array. 12:28.460 --> 12:31.120 Then we will get it right without green color. 12:32.550 --> 12:39.420 All right, beside that supplies method allows us to replace the item, suppose that we want to replace 12:39.420 --> 12:40.800 blue collar with black. 12:41.700 --> 12:43.940 For that, we have to write colors. 12:45.630 --> 12:46.530 Douglas. 12:47.830 --> 12:50.590 Then as the parameters right one. 12:52.370 --> 12:53.240 Then again, one. 12:54.200 --> 12:55.730 And then black color. 12:58.100 --> 13:01.740 Against this method, the returned array with deleted item. 13:02.390 --> 13:04.100 Let's check Koller's array. 13:06.070 --> 13:09.760 And you said that we have red and black instead of blue. 13:11.060 --> 13:14.030 All right, it's all about supplies method. 13:14.270 --> 13:15.890 Let's go back to Brackett's. 13:17.050 --> 13:24.100 So in our case, police matter will hold three parameters, first one will be position from where we 13:24.100 --> 13:25.410 want to believe the item. 13:25.810 --> 13:33.430 As you remember from previous lecture, we have to find the place of found item in an array using place 13:33.430 --> 13:34.560 in array variable. 13:35.170 --> 13:38.020 So as a first parameter, we have to pass it here. 13:40.180 --> 13:45.520 As the second parameter, we need to place one because we want to delete one item. 13:46.560 --> 13:50.460 And as a third parameter, we need to indicate found item. 13:51.490 --> 13:54.400 Which should be replaced instead of old one. 13:56.790 --> 14:04.170 All right, everything is ready now we just need to overwrite, updated, erase the old one for that. 14:04.170 --> 14:07.890 Let's write storage question list here. 14:07.890 --> 14:12.540 We need to use such question collection methods from local storage object. 14:15.170 --> 14:20.390 And then as a parameter, we have to pass, you get storage question list. 14:21.970 --> 14:24.580 All right, it should already work. 14:24.610 --> 14:27.460 Let's go to the browser, reload the page. 14:28.480 --> 14:29.620 Click on edit. 14:31.130 --> 14:34.810 Then in question, text Wright again updated. 14:35.850 --> 14:39.180 Also, add some more inputs and. 14:40.690 --> 14:42.440 Then change the correct answer. 14:43.090 --> 14:44.290 Click on update. 14:46.040 --> 14:50.450 That revolt and you see that the question text is updated. 14:51.550 --> 14:56.210 If we click on again, then we will get the updated options as well. 14:57.290 --> 15:02.070 Also, if we check local storage, let's go to the application. 15:04.290 --> 15:08.010 We will find updated contents of question. 15:10.240 --> 15:12.060 All right, perfect. 15:12.250 --> 15:16.720 It works, but as you notice, list is not updated dynamically. 15:17.140 --> 15:18.880 We need to reload the page for that. 15:19.300 --> 15:21.480 And also buttons are still displayed. 15:22.330 --> 15:28.900 But before we fix that, I want to validate the inputs and checking the correct answer in order to save 15:28.900 --> 15:30.300 updated question properly. 15:31.030 --> 15:36.730 For that, we have to use, again, several if our statements, as it was in case of that question on 15:36.730 --> 15:37.690 local storage method. 15:38.350 --> 15:40.750 So at first, let's validate the question. 15:40.750 --> 15:42.160 Text, right. 15:42.160 --> 15:43.000 If statement. 15:44.730 --> 15:51.940 As a condition, we have to indicate the question text of an item not to be empty, Sirait found item 15:51.960 --> 15:52.350 that. 15:53.630 --> 15:54.560 Question, text. 15:56.400 --> 15:59.130 Not equals to empty quotes. 16:02.150 --> 16:06.380 Also, we have to surround these lines of code with curly braces. 16:07.510 --> 16:09.850 And that we need to use el statement. 16:11.030 --> 16:12.140 With a large method. 16:16.050 --> 16:20.790 Inside alert method, right, the text, please insert question. 16:25.430 --> 16:28.280 The next we have to validate the options. 16:29.060 --> 16:35.780 So, as you remember, the number of options should be greater than one because we want at least two 16:35.780 --> 16:36.280 options. 16:36.800 --> 16:39.110 So create another if statements. 16:40.320 --> 16:43.410 And as a condition, right front item. 16:45.060 --> 16:46.140 But options? 16:47.560 --> 16:48.370 That length. 16:49.660 --> 16:51.130 Is greater than one. 16:54.860 --> 16:58.010 Then again, below, use statements with. 16:59.020 --> 16:59.890 Alert method. 17:02.460 --> 17:06.180 And right here, the text you must insert. 17:07.780 --> 17:09.910 At least two options. 17:15.040 --> 17:19.090 And the last part is to validate check in the correct answer. 17:19.510 --> 17:21.580 Again, we need to use if statements. 17:23.970 --> 17:26.670 As the condition right found item. 17:27.670 --> 17:31.120 Dot, correct answer not equals. 17:32.340 --> 17:33.390 To empty quotes. 17:36.590 --> 17:38.570 And then use our statement again. 17:40.020 --> 17:47.130 I'm going to copy it from that question on local storage, because it's a little bit long one. 17:48.370 --> 17:49.510 So let's call it. 17:50.550 --> 17:51.420 And then. 17:52.410 --> 17:53.370 Paste it here. 17:57.340 --> 18:00.580 Also, let's organize the code a little bit. 18:03.910 --> 18:05.170 Now it looks better. 18:05.530 --> 18:11.650 Let's go to the browser and test how the validation works, reload the page. 18:13.080 --> 18:14.280 Then click on Added. 18:16.160 --> 18:18.650 Live options without checking, correct answer. 18:19.460 --> 18:25.400 Click on updates and you say that we have alert message saying that we have missed to check, correct 18:25.400 --> 18:25.850 answer. 18:27.480 --> 18:35.190 If we delete, question, text and then click on update, then we will get proper alert message and 18:35.970 --> 18:38.070 the same will be happen. 18:40.020 --> 18:43.170 If we miss filling at least two options. 18:46.590 --> 18:50.280 All right, great, let's stop here. 18:50.580 --> 18:51.870 See you in the next video.