WEBVTT 00:01.410 --> 00:07.360 All right, improvers lecture, we have programmed how to display final results of user results list 00:07.380 --> 00:11.930 on admin panel as a result has the lead button on the right side. 00:12.390 --> 00:17.970 So just like you were going to give the functionality to that button in order to delete results from 00:17.970 --> 00:18.700 results released. 00:19.590 --> 00:21.930 So first, I'm going to use event listener. 00:21.930 --> 00:28.860 But as it was previously, we will attach it to your results list wrapper and then event object target 00:28.860 --> 00:34.590 property and it will help us to find out which users delete button was clicked. 00:35.820 --> 00:40.800 So it was a little hint because I'm going to give you it again as a task. 00:41.400 --> 00:47.100 I recommend you to take a look at first on added questionnaires function so that pause the video and 00:47.100 --> 00:48.540 try to do it on your own. 00:51.350 --> 00:57.380 All right, let's go ahead and attach event listener to resultantly the rapper and of course, do it 00:57.380 --> 01:01.070 in control module the right selected items. 01:02.480 --> 01:04.790 That results list rapper. 01:05.810 --> 01:09.050 And this year event listener with click event. 01:11.010 --> 01:12.990 And also right here on this function. 01:15.390 --> 01:22.640 After that, let's go to UA controller module and create new method, let's call it dilator results. 01:24.690 --> 01:26.850 That use your anonymous function. 01:28.670 --> 01:35.450 Which will hold two parameters, as we mentioned, we will need to use event object, so as a first 01:35.450 --> 01:40.070 parameter, let's place your event then as a second parameter. 01:40.310 --> 01:43.960 Because of that, we will need to get access on personal local storage. 01:44.390 --> 01:46.550 Let's insert your user data. 01:48.610 --> 01:53.590 OK, now let's go to comptroller module again and invoke this function. 01:54.650 --> 01:56.630 Right, EUA controller. 01:57.530 --> 01:59.030 That the result? 02:02.010 --> 02:08.370 So as I first argument, when this event objects at first, let's place it in anonymous function as 02:08.370 --> 02:15.540 a parameter and then insert it here as well as for the second argument, we need to get access on personal 02:15.540 --> 02:16.130 local authority. 02:16.680 --> 02:21.870 So that's right, Chris Controller, that gets person local authority. 02:22.650 --> 02:23.160 All right. 02:23.790 --> 02:27.910 We want the code to execute when admin will click on delete button. 02:28.350 --> 02:31.230 So for that, we had to use if statements. 02:32.700 --> 02:38.400 And before we actually right the condition, let's take a look on both elements in previous function, 02:39.100 --> 02:47.910 it has attributes which includes two parts DELYTH result and which is common for all the buttons and 02:47.910 --> 02:51.240 the number of parts which actually is defined using person ID. 02:52.500 --> 02:57.070 Using those parts, we will be able to define it for each delete button. 02:57.690 --> 03:04.350 So for that as a condition, we have to write the following digit result with an. 03:07.720 --> 03:15.460 And in order to find out if clicked elements, I includes this part, we need to use index of method. 03:17.410 --> 03:22.810 Which as an argument, will get events that target. 03:24.010 --> 03:24.850 That ID. 03:27.700 --> 03:34.090 So if this condition is true, then we will get the no part from the idiot, and for that let's declare 03:34.090 --> 03:37.070 new variable and call it gets idee. 03:39.730 --> 03:45.790 So we need to get the no part from you attribute, and for that, as you remember, there is a great 03:45.790 --> 03:51.820 way in JavaScript I made this split method which actually splits string and returns. 03:51.940 --> 03:55.160 Right with two items from that array. 03:55.180 --> 03:57.060 We need to use second item. 03:57.400 --> 03:57.940 So let's. 03:57.940 --> 03:58.360 Right. 03:58.360 --> 04:00.610 Get ID equals. 04:02.040 --> 04:04.920 So event dot target. 04:06.320 --> 04:07.520 That ID. 04:08.680 --> 04:10.570 And use your split method. 04:12.600 --> 04:16.180 As I see it, the attribute includes multiple dashes. 04:16.650 --> 04:24.780 So if we use your dash that it would split it up to delete, but actually we need to split it after 04:25.110 --> 04:25.370 end. 04:25.690 --> 04:28.170 And that's why we use your underscore. 04:30.030 --> 04:38.460 OK, so we need from every second item, therefore here as index number, we have to indicate index 04:38.490 --> 04:39.180 as one. 04:40.710 --> 04:48.130 And also, in order to get the number of parts with data type as number, I'm going to use your first 04:48.180 --> 04:49.050 aid method. 04:52.760 --> 04:53.270 All right. 04:54.350 --> 04:57.710 Let's test it, right, cancel that log. 04:59.650 --> 05:00.550 Get ID. 05:03.790 --> 05:10.990 Then go to Browsr and experts logging as a user in order to add one more result in results. 05:11.860 --> 05:13.660 So let's do the quiz. 05:17.700 --> 05:18.090 That. 05:19.380 --> 05:21.630 Look out and log in as admin. 05:24.730 --> 05:26.140 Click on delete buttons. 05:27.170 --> 05:30.380 And you see that we have zero and one in council. 05:31.390 --> 05:33.440 All right, so it works fine. 05:33.490 --> 05:34.970 Let's move on to the next step. 05:35.590 --> 05:42.700 Now we are going to get a rate of persons from local storage, then find using ID the result which we 05:42.700 --> 05:48.400 want to delete, then delete it and overwrite new updated array to old one. 05:49.150 --> 05:53.020 At first, let's be clear, a new variable and call it person's array. 05:56.020 --> 05:57.370 And then assigned to it. 06:00.440 --> 06:04.310 User data that got personal data. 06:06.010 --> 06:13.060 We are storing personal data into variable not only for minimizing the amount, if we do not do it, 06:13.060 --> 06:15.300 then person error won't be changed. 06:15.310 --> 06:21.580 And in local storage, after setting Newera, we will still get the old one. 06:22.810 --> 06:28.720 All right, so now we need to use follow up in order to iterate through the person's error and then 06:28.720 --> 06:33.160 find out which is needed item the right variable, i.e. equal to zero. 06:34.480 --> 06:39.880 That the condition is less than the length of a person's array. 06:41.610 --> 06:43.200 And then I plus plus. 06:44.610 --> 06:47.400 Inside Fallujah, we have to use if statement. 06:48.740 --> 06:54.830 In which as a condition we have to define, if I'd of person object equals to get ID. 06:56.110 --> 06:57.360 The right person, Sarah. 06:59.020 --> 07:01.630 And I thought I'd. 07:03.160 --> 07:05.190 Triple equals to get it. 07:06.670 --> 07:13.000 So if this condition is true, it means that we have found the person and now it's time to delete it 07:13.420 --> 07:15.520 for that, I am going to use this method. 07:15.910 --> 07:19.930 So rights persons aura that supplies. 07:21.850 --> 07:27.930 We need to place your two arguments, first one will be position from where we want to delete the item. 07:27.940 --> 07:29.460 So let's place your eye. 07:30.250 --> 07:36.380 And as a second argument, we need to indicate how many items we want to delete, therefore. 07:36.940 --> 07:37.510 That's right. 07:37.540 --> 07:38.170 You want. 07:40.250 --> 07:46.460 So persons are right, is updated, and the last thing that we have to do is to overwrite this newly 07:46.460 --> 07:50.690 updated array to old one on local storage, so. 07:50.690 --> 07:51.050 Right. 07:51.590 --> 07:52.580 User data. 07:54.140 --> 07:56.240 That said, personal data. 07:57.750 --> 08:01.380 And as an argument place, your persons are right. 08:02.530 --> 08:07.090 All right, let's go to the browser, then login as admin. 08:08.720 --> 08:10.900 So here we have two results. 08:10.970 --> 08:17.960 Let's click on both the right buttons, you see that results are not remote because we need to reload 08:17.960 --> 08:18.800 the page for that. 08:20.750 --> 08:22.640 So log in as admin again. 08:23.600 --> 08:30.950 And you see that results are deleted from that list, also, let's check local storage, go to application. 08:32.730 --> 08:35.810 And you see that person's data is at. 08:37.860 --> 08:44.340 All right, so the last thing to do in this video is to delete the results from results released dynamically 08:44.760 --> 08:46.710 without any reloading the page. 08:47.250 --> 08:53.820 For that, we just need to go to control controller module and after delete without function, invoke 08:53.990 --> 08:55.740 add result on panel method. 08:56.580 --> 08:59.910 So let's copy and paste here. 09:02.250 --> 09:03.630 Then go to your browser. 09:05.020 --> 09:06.910 Logging as user and. 09:08.440 --> 09:09.280 Do the quiz. 09:13.400 --> 09:15.830 Then log out and log in as admin. 09:19.930 --> 09:24.820 Delayed results, and I said that it's remote result less dynamically. 09:26.500 --> 09:32.650 All right, we're almost there to finish the application is very close because we just need to program 09:32.770 --> 09:36.060 clear this button, so let's go ahead and do it.