WEBVTT 00:01.260 --> 00:06.750 As we said in this lecture, we're going to give functionality to a clear result button, which actually 00:06.750 --> 00:12.870 will delete the entire result list, the code that we will need to write is going to be almost similar 00:12.870 --> 00:18.890 to the code which we have written for clearing the question list before we start programming this button. 00:19.060 --> 00:25.440 Again, I'm going to give you it as a task so that the video and try to do it on your own. 00:28.970 --> 00:34.460 All right, so the first thing that we are going to do is to set events to listen to a clear result 00:34.460 --> 00:34.890 button. 00:35.420 --> 00:38.580 But before we do that, let's select this element. 00:39.350 --> 00:41.960 Take a look on index dot file. 00:43.180 --> 00:47.330 So here we have an admin panel section button element. 00:48.000 --> 00:52.300 It has the ID results clear and so let's copy it. 00:52.300 --> 00:58.630 And in items object add new property is going to be placed in admin panel elements. 00:58.810 --> 01:01.390 Let's call it clear results can. 01:03.640 --> 01:10.300 That's selected, right, documents that gets elements by ID and hastier ID. 01:12.520 --> 01:20.530 Then go to controller module and attach to this element event, listener writes, selected items, then 01:20.530 --> 01:22.000 clear results, PTM. 01:23.500 --> 01:25.080 That that event listener. 01:26.440 --> 01:31.030 Use your click events and also place your anonymous function. 01:32.830 --> 01:39.430 All right, so the next step as a guest is to create a new method, which is going to be part of UI 01:39.430 --> 01:40.390 controller module. 01:40.870 --> 01:41.830 So that's right. 01:43.130 --> 01:44.720 Clear results list. 01:46.090 --> 01:48.430 And assigned to its anonymous function. 01:49.400 --> 01:55.490 This function will receive one parameter we need to have access on person, local authority, so let's 01:55.490 --> 01:57.350 place your user data. 01:59.180 --> 02:05.330 And then in controller module, I'm going to invoke this function, so let's write inside anonymous 02:05.330 --> 02:09.020 function UI controller DOT Carlier result list. 02:11.340 --> 02:16.710 As an argument, we need to use your personal authority, so let's right, Chris Controller. 02:18.350 --> 02:20.450 That's got person local authority. 02:21.870 --> 02:24.360 All right, let's go back to our function. 02:26.420 --> 02:34.130 So deleting the entire result list is important and at the same time, dangerous thing for admin because 02:34.130 --> 02:39.190 he or she may lose the entire data accidentally just by one click on button. 02:40.010 --> 02:46.090 So as it was in case of clear question, this function, we need somehow to warn admin about it. 02:46.580 --> 02:52.090 And for that we have to use confirm method, which will warn admin by pop up message. 02:52.700 --> 02:55.790 You know, that control method gives us two options. 02:56.150 --> 03:01.720 Either proceed clicking on OK button or reject clicking on kastle. 03:02.390 --> 03:05.990 So let's create a new variable and call it called. 03:07.510 --> 03:08.770 Then assigned to it. 03:09.920 --> 03:11.330 Confirm method. 03:13.640 --> 03:16.730 The text that should the admin will be the following. 03:18.230 --> 03:18.830 Warning. 03:20.080 --> 03:22.960 You will lose entire rooms at least. 03:26.570 --> 03:33.140 All right, so confirm method returns, boolean value, if we click on OK, then it will return. 03:33.140 --> 03:33.490 True. 03:33.890 --> 03:37.440 And in case of clicking on Kastle we will get false. 03:38.270 --> 03:42.560 So we want to remove the entire data when confirmed returns. 03:42.560 --> 03:42.910 True. 03:43.190 --> 03:45.620 Therefore, we need to write if statement. 03:46.610 --> 03:51.860 And then as a condition, we have to place here the variable cost. 03:53.550 --> 04:00.270 So if this condition is true, then we need to delete the data for that, let's use remove personal 04:00.270 --> 04:01.050 data method. 04:01.950 --> 04:03.930 So it's right use of data. 04:05.070 --> 04:06.930 That remove personal data. 04:07.800 --> 04:13.220 After the looting, there is at least we need to clear the entire result, at least the rapper. 04:13.770 --> 04:15.810 So for that that's right. 04:15.810 --> 04:20.040 You dump items that results with rapper. 04:21.680 --> 04:23.500 Danus in GML. 04:25.260 --> 04:26.880 Which equals two empty quotes. 04:27.660 --> 04:34.410 All right, let's go to the browser and at first login as user, right, McDo. 04:36.510 --> 04:39.630 And then answer the questions. 04:42.330 --> 04:44.670 And after finishing the quiz. 04:46.530 --> 04:51.360 Let's log in again, but as another user, the right merrett wrong. 04:53.780 --> 04:55.190 Then do the quiz again. 05:00.140 --> 05:07.220 And then in order to get on admin panel, let's login as admin, right, John Smith. 05:10.870 --> 05:17.230 So here we have two results for Nick and Mary, let's click on Clear Button. 05:18.270 --> 05:27.100 So we got a message which warns us that we will lose entire result, click on OK and see that result 05:27.120 --> 05:28.030 least is a.. 05:29.190 --> 05:33.510 Let's go to application and check the local storage. 05:35.370 --> 05:38.100 You say that personal data is deleted. 05:38.460 --> 05:43.130 All right, let's look out and do decrease by user again. 05:43.140 --> 05:44.510 So right now. 05:46.740 --> 05:48.300 That answered the questions. 05:50.410 --> 05:52.300 And finish the quiz. 05:54.770 --> 05:59.480 Then again, log in as admin rights John Smith. 06:01.110 --> 06:04.170 In this case, let's click on delete button. 06:05.330 --> 06:07.350 So you see that the result is deleted. 06:07.850 --> 06:14.330 Then again, click on clear results and regardless of that, we do not have any more results. 06:14.750 --> 06:16.860 We still got confirmed message. 06:17.480 --> 06:18.840 Actually, we don't need it. 06:18.860 --> 06:25.580 And in order to fix that, we need another if statements in which as a condition, we will insert the 06:25.580 --> 06:28.340 length of personal data to be greater than zero. 06:29.000 --> 06:33.680 So right here, if and then the condition user data. 06:35.940 --> 06:37.650 That gets personal data. 06:39.680 --> 06:40.670 That length. 06:42.550 --> 06:43.800 Is greater than zero. 06:50.870 --> 06:56.990 All right, let's go to Browsr again and logging as user rights, Mary Brown. 06:58.950 --> 07:00.630 Answer the questions. 07:05.820 --> 07:11.280 Then go to Atzmon panel, so for that log-in as John Smith. 07:14.220 --> 07:20.940 Deliver the results using delete button, then click on Clear Results button and you see that it works 07:20.940 --> 07:23.490 because we didn't get again confirmed message. 07:24.600 --> 07:30.530 All right, it seems that everything works properly and nicely, but we still have one little problem. 07:31.510 --> 07:33.670 Let's login as McDo. 07:36.080 --> 07:37.520 And then do the Chris. 07:43.960 --> 07:48.340 Then did the same buy another user, writes Mary Brown. 07:53.290 --> 07:57.510 Then after finishing it, go to admin panel. 08:01.940 --> 08:09.600 So we have year two results, let's click on Clear Results Bottom so they are related, then again, 08:09.620 --> 08:16.370 click on the same button and see that we got an error, which tells us that JavaScript engine cannot 08:16.370 --> 08:17.830 read the links property of. 08:17.870 --> 08:20.440 Now, this is no error for us. 08:20.450 --> 08:22.030 We have got it several times. 08:22.700 --> 08:29.210 So in order to fix that, we need to write another statement and also wrap the code with its curly braces. 08:29.660 --> 08:33.020 Write it then as a condition. 08:35.260 --> 08:36.910 Right, user data. 08:38.380 --> 08:40.180 That gets personal data. 08:41.350 --> 08:42.940 Not equals to No. 08:52.620 --> 08:59.610 All right, let's finally test how this works in as a user, right, Mary Brown? 09:02.050 --> 09:04.180 And answer the questions. 09:07.910 --> 09:12.440 Then check admin panel, so that's right here, John Smith. 09:16.080 --> 09:17.610 Click on Carlier Button. 09:18.650 --> 09:25.430 So the result is deleted, then click again on Clear Button, and we do not have any errors. 09:25.460 --> 09:26.740 Everything works fine. 09:27.320 --> 09:31.820 And finally we can say that building our application is finished. 09:33.110 --> 09:39.530 Congratulations, I want to say thank you for being with me till the end of this project, so you have 09:39.530 --> 09:45.440 built this nice up, I can guarantee you that this is the app which you can use in real life. 09:45.890 --> 09:49.910 You can feel free and show it to your friends or family members. 09:50.450 --> 09:56.870 And the most important thing is that you got huge knowledge in JavaScript from building this advanced 09:56.870 --> 09:57.320 project. 09:58.070 --> 10:03.200 You're able to use this knowledge in the future to build similar or even more advanced projects. 10:04.170 --> 10:09.340 Besides that, you can feel free and add some more features to this application and improve it. 10:09.950 --> 10:15.710 For example, you can set a timer, defined the amount of time from admin panel and then the user should 10:15.710 --> 10:16.460 do the squeeze. 10:16.760 --> 10:17.600 During this time. 10:18.170 --> 10:22.670 You can also place results by ascending or descending order and so on. 10:23.480 --> 10:26.270 If you do it, do not forget to share it with us. 10:26.870 --> 10:28.610 Will be glad and thankful. 10:29.510 --> 10:30.910 All right, let's move on.