WEBVTT 00:01.710 --> 00:05.340 OK, we ready to start coding and program or application. 00:05.640 --> 00:07.960 Let's take a look, unfinished version of the app. 00:09.660 --> 00:14.190 So the first section that we are going to program is admin panel. 00:14.970 --> 00:21.380 Here we have text area for adding question, text and input for adding the proper options as a default. 00:21.390 --> 00:26.760 We have two inputs, but if we focus on the last input, it automatically adds new input. 00:27.450 --> 00:29.490 So here we have radio buttons for managing. 00:29.490 --> 00:30.320 Correct answer. 00:31.080 --> 00:40.470 Let's type your something and then check correct answer after clicking on insert button. 00:40.500 --> 00:46.050 The question is added below in question list, we are able to added question and change the content 00:46.050 --> 00:51.780 of it and then update or delete the entire question using clear at least button. 00:52.200 --> 00:54.060 We can delete the entire question list. 00:54.780 --> 00:57.210 Actually, that's it from where we will start. 00:57.690 --> 01:00.910 As for the results list, it will be programmed a bit later. 01:01.830 --> 01:02.310 All right. 01:03.810 --> 01:07.920 We have our working admin panel, but nothing happens here yet. 01:08.820 --> 01:12.620 Let's go to brackets and at first remove this code. 01:14.910 --> 01:20.550 The first thing that we need to create is function constructor, which actually will be a question constructor. 01:20.940 --> 01:21.960 So that's right. 01:21.960 --> 01:26.670 At first, coming to your question, constructor. 01:30.060 --> 01:33.960 And then create a function constructor and call it question. 01:37.800 --> 01:43.860 You already know that function constructor is used to create brand new objects in very handy and dynamic 01:43.860 --> 01:51.600 way, each question object is going to hold it text of the question, also proper options and correct 01:51.600 --> 01:52.020 answer. 01:52.440 --> 02:00.450 So we need to hear this parameters right inside the parentheses ID then question text. 02:03.050 --> 02:04.310 Then options. 02:06.290 --> 02:08.390 And the last one, correct answer. 02:11.350 --> 02:18.230 And now we need to use this variable, which will point to question object that will be created soon. 02:18.670 --> 02:22.900 So right inside the crisis, this ID equals to ID. 02:25.610 --> 02:28.130 That this question text. 02:31.450 --> 02:33.340 Equals to question text. 02:35.520 --> 02:37.620 They that options equals the options. 02:42.060 --> 02:47.630 And the last one they start correct answer equals the correct answer. 02:50.310 --> 02:56.610 All right, in order to add questions, we need to use insert button, therefore it's time to select 02:56.610 --> 02:56.910 it. 02:57.660 --> 03:04.110 It is a part of user interface controller module, so we need to select it in UI controller. 03:04.920 --> 03:07.410 Because of that, we are going to select more elements. 03:07.410 --> 03:08.850 We need to create an object. 03:09.390 --> 03:11.370 Let's call it dump items. 03:13.750 --> 03:20.260 And I'm going to add your comment, the element that we want to select, I mean, insert button belongs 03:20.260 --> 03:24.670 to admin panel section, so write your admin panel elements. 03:28.480 --> 03:35.200 And here, let's right first property and call it question, insert an. 03:39.030 --> 03:47.260 Let's take a look on the actual file and find insert pattern, you see that it has ID question insert. 03:47.610 --> 03:49.770 And so let's copy it. 03:50.370 --> 04:05.310 And right here, documents that get aliment by ID and inside the parenthesis, let's paste the ID that 04:05.310 --> 04:06.030 we have copied. 04:06.420 --> 04:07.940 Question insert BGA. 04:10.600 --> 04:13.070 All right, this object is private. 04:13.090 --> 04:16.630 It's not accessible from outside in order to make it public. 04:17.020 --> 04:20.650 We need to return an object and then pass this variable in it. 04:21.070 --> 04:33.880 So right return, then open the braces and now create property, call it get done items and assign to 04:33.880 --> 04:37.660 that property as a value the variable dump items. 04:40.340 --> 04:48.680 OK, now we can say that this object is accessible for controller, it's time to add event listener 04:48.680 --> 04:49.360 on the button. 04:49.820 --> 04:56.060 We need to do it in controller module so we have to select insert button for that. 04:56.060 --> 05:05.630 We need to write UI controller DOT, get some items which we have just returned from UI controller, 05:06.500 --> 05:09.280 and then we need to access unspecified button. 05:09.740 --> 05:10.550 So right. 05:10.550 --> 05:12.200 Question insert ptm. 05:14.060 --> 05:16.130 Not at event listener. 05:18.520 --> 05:24.370 Then create click event and also pass your anonymous function. 05:26.970 --> 05:31.240 All right, now it's time to test how evangelist there actually works. 05:31.260 --> 05:37.020 It is a good practice all the way to test if event listener works properly before you start writing 05:37.020 --> 05:37.650 code for it. 05:38.010 --> 05:39.540 So write inside the function. 05:39.540 --> 05:42.150 Cancel the log works. 05:45.070 --> 05:49.540 Then go to Browsr, inspect the page. 05:52.730 --> 05:56.390 Then click on insert button and you see that it works. 05:57.500 --> 06:06.210 All right, great, let's get rid of this council the plug before we proceed. 06:06.230 --> 06:08.300 I'm going to make this code a bit smaller. 06:08.420 --> 06:10.580 Because of that, we will select elements. 06:10.580 --> 06:17.420 Often I'm going to start getting some items, property in a variable and then use this variable instead 06:17.420 --> 06:17.740 of it. 06:18.140 --> 06:18.470 So. 06:18.470 --> 06:18.860 Right. 06:19.190 --> 06:26.470 Selected DOM items, you know, that Dom Items is a UI controller. 06:26.480 --> 06:30.500 So we need to write UI controller dot get items. 06:33.090 --> 06:38.970 And then use this variable here, right, selected dumb items. 06:39.990 --> 06:47.280 OK, the next step we have to do is to create a method which will manage adding the questions on local 06:47.280 --> 06:47.680 storage. 06:48.270 --> 06:50.300 Again, we need to make this method public. 06:50.310 --> 06:54.740 So at first we have to return an object and then pass this method in it. 06:55.560 --> 06:59.990 Those things should be placed inside this controller module. 07:00.570 --> 07:08.310 So write your return, then open the process and then create a new method. 07:08.610 --> 07:13.890 Call it at question on local storage. 07:19.150 --> 07:20.920 Then writes anonymous function. 07:23.910 --> 07:30.090 So as we said, using this method, we will add questions on local storage, this method will receive 07:30.090 --> 07:35.390 two parameters, which actually we had to get from text area. 07:35.400 --> 07:38.900 I mean, the question text and options from inputs. 07:39.450 --> 07:42.890 So these two parameters should be a new question. 07:42.900 --> 07:43.320 Text. 07:47.000 --> 07:53.680 And then options again, we need to select those items in the controller. 07:54.120 --> 07:58.290 I'm going to look at index dot file and find those items. 08:00.050 --> 08:02.180 So here we have text every element. 08:02.750 --> 08:04.730 It has a new question, text. 08:04.740 --> 08:05.810 Let's copy it. 08:12.250 --> 08:21.490 Then in a controller at property to dump items object, so right here, new question text, then documents 08:22.030 --> 08:32.080 dot and use again, get element by Idy method and inside the parentheses, paste the ID that we have 08:32.080 --> 08:32.490 copied. 08:32.620 --> 08:33.790 New question text. 08:34.030 --> 08:36.400 Then again, go to indicate that extremophile. 08:37.090 --> 08:42.240 So we need now input elements which have class admin option. 08:42.730 --> 08:43.720 Let's copy it. 08:44.440 --> 08:50.440 And then in some items object, create another property, call it admin options. 08:51.790 --> 08:54.310 Those elements have class attribute. 08:54.910 --> 08:57.910 Therefore I'm going to use query selector all method. 08:58.210 --> 09:00.400 So write documents dot. 09:02.700 --> 09:04.260 Querrey, selecter of. 09:06.980 --> 09:12.980 And inside the parentheses, let's paste here the class name admin option. 09:15.200 --> 09:23.260 All right, it's time to call that question on local storage method, and we need to do it in control 09:23.260 --> 09:25.970 controller module inside at even listeners function. 09:26.750 --> 09:28.310 As you know, this method exists. 09:28.310 --> 09:30.770 Increase controller module, so. 09:30.770 --> 09:41.450 Right, Chris, controller dot edge question on local storage as remember, this method holds two parameters, 09:41.840 --> 09:45.830 new question, text and options, which we have just selected. 09:46.130 --> 09:48.110 So we need to pass them as arguments. 09:49.250 --> 09:52.190 So right here, selected items. 09:54.070 --> 09:54.580 That. 09:55.580 --> 10:04.280 New question, text and then selected items, dot admin options. 10:07.470 --> 10:14.210 All right, so the function is invoked now let's test if at question on local storage method works properly. 10:14.730 --> 10:16.290 So right inside it. 10:16.800 --> 10:17.350 Good luck. 10:17.400 --> 10:17.850 Hi. 10:22.230 --> 10:29.290 Then go to Browsr revolt and see that we don't have any errors. 10:29.760 --> 10:32.760 Click on Insert and we have high in council. 10:33.630 --> 10:35.190 All right, perfect. 10:36.300 --> 10:37.990 I think it's enough for this lecture. 10:38.010 --> 10:38.970 Let's stop here. 10:39.300 --> 10:40.380 See you in the next one.