WEBVTT 00:01.960 --> 00:07.510 In this lecture, we're going to give the functionality to clear this button, which will actually clear 00:07.510 --> 00:08.350 up the entire list. 00:08.740 --> 00:11.390 This is the main and only job of this button. 00:11.830 --> 00:12.280 All right. 00:12.610 --> 00:16.110 The first thing that we are going to do is to set event listener on this button. 00:16.540 --> 00:23.110 This element is already selected because we have disabled it during editing the questions in order to 00:23.110 --> 00:24.980 attach to it at the event listener. 00:25.000 --> 00:27.430 We have to go again in controller module. 00:28.060 --> 00:30.550 So let's select these elements. 00:30.730 --> 00:31.180 Right. 00:31.180 --> 00:32.860 Selected items. 00:34.360 --> 00:36.400 That question's clear and. 00:38.210 --> 00:39.890 And then at event listener. 00:42.240 --> 00:44.340 Inside the parentheses right click event. 00:46.230 --> 00:51.630 We're going to use your anonymous function because the method for clearing the question list will hold 00:51.630 --> 00:52.530 a parameter. 00:56.330 --> 00:59.940 Then let's create the method itself. 01:00.710 --> 01:04.130 This method will be the part of UI controller module. 01:04.640 --> 01:08.510 So let's go to UI controller module and create a new method. 01:08.510 --> 01:11.090 Let's call it clear question list. 01:14.850 --> 01:16.950 Assigned to its anonymous function. 01:19.450 --> 01:25.600 So, as we said, this function is going to hold parameter because of that, we need to have access 01:25.600 --> 01:30.910 on local storage, therefore we have to place here as a parameter storage question list. 01:33.480 --> 01:41.520 All right, let's invoke dysfunction, go to controller module and insight, anonymous function, right, 01:42.000 --> 01:43.290 UI controller. 01:44.320 --> 01:46.540 That clear question, at least. 01:48.810 --> 01:54.000 So, as we said, we need to have access on local storage, therefore as an argument, we need to pass 01:54.610 --> 01:59.090 with a controller that gets question local authority. 02:01.340 --> 02:01.850 All right. 02:02.860 --> 02:10.570 That's the first test, how this function works right inside clear question list function Castlewood 02:10.570 --> 02:10.900 log. 02:13.040 --> 02:18.500 And I'm going to pass here the parameter storage question list in order to see, again, how this object 02:18.500 --> 02:19.040 looks like. 02:21.260 --> 02:23.060 Let's go to the browser. 02:24.110 --> 02:24.710 Revolt. 02:26.370 --> 02:28.080 Click, click on this button. 02:28.940 --> 02:31.880 And we have in council local storage object. 02:32.870 --> 02:39.770 As you know, this object contains three methods for getting questions, for setting them and also for 02:40.160 --> 02:45.860 removing the questions in this lecture, we will use remote question collection method in order to clear 02:45.860 --> 02:46.390 up the list. 02:47.650 --> 02:54.430 All right, let's go back to your brackets so we want clear button to do its job, if we have at least 02:54.430 --> 03:01.960 one item in question list for doing that, we have to use if statements, let's delete cancel that log 03:01.960 --> 03:02.590 and then. 03:02.590 --> 03:03.250 Right, if. 03:05.030 --> 03:07.200 As a condition, we have to persevere. 03:07.220 --> 03:11.250 The length of question list arrived to be greater than zero. 03:11.600 --> 03:11.930 So. 03:11.930 --> 03:13.610 Right, historic question list. 03:15.530 --> 03:17.720 That dog gets questioned collection. 03:19.690 --> 03:21.220 Land use, land, property. 03:23.840 --> 03:26.340 Which is greater than zero. 03:27.170 --> 03:33.580 So clearing the entire list is an important and kind of dangerous thing for admin because with just 03:33.590 --> 03:36.590 one click, he or she might lose all the questions. 03:37.190 --> 03:40.820 When we deal with such things, we always need to warn the users. 03:41.150 --> 03:43.860 And for that we can use confirm method. 03:44.300 --> 03:47.620 Let's create variable and call it call. 03:49.580 --> 03:51.560 Which equals to confirm. 03:54.440 --> 04:01.460 So this method gives us a pop up message like alert method, which allows users to answer the question 04:01.820 --> 04:09.470 either with accepting or refusing, and the user can do it simply clicking on OK or cancel buttons, 04:10.100 --> 04:13.460 confirm method returns, boolean value, true or false. 04:13.880 --> 04:17.210 So if the user clicks on, OK, it's true. 04:18.420 --> 04:21.450 And in case of clicking on, it returns false. 04:22.350 --> 04:27.870 That's right, Willow Castle, the plug and play CEO, the variable called. 04:30.890 --> 04:33.860 That go to the browser reloader page. 04:35.410 --> 04:37.270 Then click on Khelil this button. 04:39.280 --> 04:46.270 You see that we had a pop up message with OK and Kastle buttons, so if we click on OK, we will get 04:46.270 --> 04:51.910 through in council and then if we click on council, we will get false. 04:53.300 --> 05:00.560 All right, that's the way how confirm method works in JavaScript, actually, we need some warning 05:00.560 --> 05:01.500 message here. 05:01.880 --> 05:04.940 So let's write warning. 05:07.360 --> 05:10.660 You will lose entire question, at least. 05:13.560 --> 05:21.090 OK, so if admin accepts on that message, then we need to delete the question list for that, we have 05:21.090 --> 05:22.760 to use another if statement. 05:23.400 --> 05:26.400 Let's delete Castle that log and write if. 05:27.860 --> 05:31.460 As a condition, we have to pass here to variable costs. 05:33.790 --> 05:39.940 So if this condition is true, if I had accepted that in order to delete a list, we need to write. 05:40.920 --> 05:47.010 Storage question list and then use method from local storage object, which allows us to delete the 05:47.010 --> 05:47.820 entire list. 05:48.300 --> 05:51.330 So that's right, remove question collection. 05:54.200 --> 05:59.900 All right, let's go to the browser at first I'm going to ask a question. 06:02.690 --> 06:05.390 Then at another one. 06:06.570 --> 06:11.760 Then go to application and display local storage. 06:14.100 --> 06:15.810 Click on Clear List Button. 06:16.920 --> 06:18.990 So we have here confirmed message. 06:20.620 --> 06:29.050 Click on OK, and you see that both key value pairs parts are deleted, but actually questions are still 06:29.050 --> 06:32.250 displayed in question list for disappearing them. 06:32.260 --> 06:34.030 We need to reload the page. 06:35.680 --> 06:42.610 So you see that questions are no longer displayed in question list, but at the same time in local storage 06:42.610 --> 06:44.890 there is created New Hampshire, right? 06:46.000 --> 06:50.740 That's because of previously created if statements. 06:52.200 --> 06:58.980 Which always prepares local storage when questioned collection equals to now, in other words, when 06:59.010 --> 07:00.770 needed, key doesn't exist. 07:02.440 --> 07:08.260 All right, let's go back to clear question this function and make a question list and to dynamically 07:08.660 --> 07:09.970 it's very simple. 07:10.000 --> 07:12.640 We just need to write Dom items. 07:14.090 --> 07:19.370 Got inserted questions rather than use in HTML property. 07:21.450 --> 07:23.130 Which equals two empty equals. 07:25.720 --> 07:31.210 Let's go to Browsr, reload the page and then add the question. 07:34.390 --> 07:36.190 Click on Close Button. 07:37.660 --> 07:43.540 Then OK, and I see that question is deleted and it's disappeared dynamically. 07:45.170 --> 07:52.910 OK, everything seems to be fine, but there is one little problem if we click again on clear this button, 07:53.360 --> 08:01.850 then in console we will get an error, which tells us that JavaScript engine cannot with property left 08:01.850 --> 08:02.000 off. 08:02.040 --> 08:07.090 Now, I'm sure you've guessed what happened here because it's a known error for us. 08:07.640 --> 08:13.940 It happens because when we clear the question list and then again, click on clear this button before 08:13.940 --> 08:20.990 reloading the page, there is not created new right gets question collection method gives us the value 08:20.990 --> 08:23.510 now and therefore we get an error. 08:24.960 --> 08:25.610 Makes sense. 08:27.280 --> 08:34.510 OK, we can simply fix that problem for that, we need to use another if statement and surround all 08:34.520 --> 08:36.430 this code with its color prices. 08:36.820 --> 08:41.320 So right at the top, if then as a condition. 08:41.680 --> 08:42.060 Right. 08:42.070 --> 08:43.600 Storage question at least. 08:44.840 --> 08:46.970 That gets questioned collection. 08:49.140 --> 08:50.880 Not equals to now. 08:53.110 --> 08:56.890 And then place all the code inside that the if statement. 09:00.860 --> 09:06.980 All right, so now everything is ready, let's go to the browser again, reloader page. 09:07.940 --> 09:09.470 Then at question. 09:12.830 --> 09:14.690 Click on Clearly Button. 09:15.890 --> 09:25.100 Then OK, and I see that list is a. let's click again on Clear List Button and you see that we don't 09:25.100 --> 09:26.330 have any error here. 09:27.360 --> 09:29.130 All right, perfect. 09:29.400 --> 09:31.800 We have just finished the program, one more button. 09:32.190 --> 09:34.270 I think it was very easy to understand. 09:34.650 --> 09:36.480 So let's move on to the next lecture.