WEBVTT 00:02.040 --> 00:06.900 In this lecture, we're going to make clear the question text area and inputs software insert in the 00:06.900 --> 00:07.320 question. 00:07.540 --> 00:12.150 And also we're going to define some rules which admin should protect during adding the questions. 00:12.900 --> 00:13.290 All right. 00:13.740 --> 00:16.430 So all of this data is coming from local storage. 00:16.470 --> 00:19.780 Let's go to application and see how it actually looks. 00:20.640 --> 00:27.180 So you see here our questions in question collection are it's available to see on the part of the data. 00:27.540 --> 00:29.930 But actually all the data is placed here. 00:30.750 --> 00:36.120 We're able to manually delete all the data we need to just press these delete. 00:36.120 --> 00:36.460 I could. 00:37.110 --> 00:37.560 All right. 00:38.190 --> 00:44.520 So the first thing that I'm going to do is to clear the text area and inputs and also uncheck the radio 00:44.520 --> 00:47.480 button after clicking on insert button. 00:48.180 --> 00:58.350 I mean, when we fill the inputs, then check the correct answer and then click on insert button. 00:59.220 --> 01:04.590 The contents of question and options are not clear and also the correct answer is still checked. 01:05.280 --> 01:07.170 OK, let's fix that. 01:07.650 --> 01:08.970 Go back to brackets. 01:09.750 --> 01:16.740 After all of these steps, I mean, when we create a question object, then get question collection 01:16.740 --> 01:23.700 array from lack of storage and then add to it new object and inserted in local storage, we need to 01:23.700 --> 01:27.360 clear text area inputs and also uncheck the correct answer. 01:28.770 --> 01:31.650 All right, let's start from question text. 01:31.660 --> 01:37.380 We need to write this code after the last line where we insert data in local storage. 01:37.740 --> 01:41.520 So in order to make text area clear, we can do it very simply. 01:41.520 --> 01:44.550 We just need to write new question. 01:44.560 --> 01:50.670 Text dot value equals to empty strings. 01:51.870 --> 01:54.960 As for the inputs, we may have at least two of them. 01:55.380 --> 02:04.170 So we need to use for a loop right here for as a counter, I'm going to use variable X because we have 02:04.170 --> 02:05.300 already used AI. 02:05.640 --> 02:08.970 The rights variable X equals to zero. 02:09.720 --> 02:17.490 Then we need to condition X is less than options that length and then X plus plus. 02:20.030 --> 02:29.810 In order to make the inputs clear, we have to write the following options X that value equals to empty 02:29.810 --> 02:30.230 swings. 02:32.060 --> 02:32.520 OK. 02:32.870 --> 02:36.710 As for the radio buttons, we need to check the property to be false. 02:37.220 --> 02:46.310 So writes Options X again, I'm going to use here previous element sibling property because radio buttons 02:46.310 --> 02:50.770 are placed as previous siblings for input elements in HTML document. 02:51.080 --> 02:58.880 So right here that previous sibling than docs checked equals the false. 03:01.630 --> 03:11.590 All right, let's test how it works, go to the browser, reload the page and then type here something. 03:14.530 --> 03:15.940 Check the correct answer. 03:17.320 --> 03:19.180 Click on insert, and here we go. 03:19.780 --> 03:26.680 New question is added to local storage and also text area and inputs are empty and the radio button 03:26.680 --> 03:27.460 is unchecked. 03:27.700 --> 03:28.890 OK, great. 03:29.500 --> 03:30.490 It works fine. 03:30.490 --> 03:31.930 But there is another problem. 03:32.720 --> 03:36.200 If I click on insert, the empty question will be added. 03:36.730 --> 03:42.700 Actually, we don't need it and in order to prevent it, I'm going to use several if statements. 03:43.570 --> 03:53.320 So let's start from a question, text, creative statement and as a condition, write new question text. 03:53.560 --> 03:58.330 That value not equals to empty strings. 04:01.590 --> 04:09.780 And now we need to place all of this code inside that if statement and after that we need to write our 04:09.810 --> 04:13.830 statement in which we will were adamant about the mistake. 04:14.490 --> 04:19.020 For that, there is a very simple and handy way in JavaScript we can use alert. 04:19.470 --> 04:25.500 PopUp box alert is a JavaScript built in method which actually pops a box with some text. 04:25.890 --> 04:34.110 So let's use it right alert and inside the parentheses lets place text as a string, which we want to 04:34.110 --> 04:35.130 be popped up. 04:35.280 --> 04:35.720 Right. 04:35.730 --> 04:38.520 For example, police insert question. 04:41.990 --> 04:48.110 All right, let's go to the browser, reload the page, live. 04:48.130 --> 04:59.840 The question, text area empty and fill the options, then check correct answer, click on insert and 04:59.840 --> 05:04.460 you see that we have a warning message which tells us, please insert the question. 05:05.260 --> 05:05.720 All right. 05:05.720 --> 05:06.300 Perfect. 05:07.190 --> 05:12.590 Let's go back to Brackett's and move on to the next false statements, which actually checks if options 05:12.590 --> 05:14.060 inputs are empty or not. 05:15.230 --> 05:18.390 You know that we store the values of the inputs in option array. 05:19.370 --> 05:24.230 Also, you see that in order to add input value to options array, it should not be empty. 05:24.970 --> 05:28.010 OK, we want at least two inputs to be filled. 05:28.040 --> 05:34.580 So as a condition in your statement, we need to indicate the length of options array to be greater 05:34.580 --> 05:35.350 than one. 05:35.870 --> 05:44.690 So create another if statement and as a condition, let's pass your options array that length. 05:47.310 --> 05:49.060 Is greater than one. 05:51.480 --> 05:57.930 And again, surround all these lines of code with Eve statements, Calabrese races, and then we need 05:57.930 --> 06:00.680 Elsas statement with another pop up message. 06:01.230 --> 06:03.810 So I'm going to use again, alert method. 06:04.020 --> 06:04.350 Right. 06:04.350 --> 06:07.350 Our statement then is articulable basis, right. 06:07.350 --> 06:10.700 Alert and place here. 06:10.710 --> 06:15.150 The text, you must insert at least two options. 06:18.690 --> 06:27.240 All right, let's go to the browser and test again, reload the page, then fill the text area in order 06:27.240 --> 06:32.960 to avoid popping up first a loud message, then leave both input's empty. 06:33.540 --> 06:40.860 But anyway, check the radio button, click to insert, and you see that we have a warning message telling 06:40.860 --> 06:43.740 us that you must insert at least two options. 06:45.180 --> 06:47.990 All right, let's reload again. 06:48.000 --> 06:54.930 Fill the question text area, then insert something in one of the options and live another one as empty, 06:56.730 --> 06:58.250 then check correct answer. 06:59.100 --> 07:03.500 Click on insert and you see that again, we have the same message. 07:04.320 --> 07:10.500 It's because in this case, Options Array includes only one item and the condition inside if statement 07:10.500 --> 07:17.850 is false in order to work it properly, we need to fill at least two options all the time. 07:17.850 --> 07:21.780 I mentioned at least two options because we have just two of them at this point. 07:22.230 --> 07:28.800 But as we proceed building the app, we will add functionality to it in order to add more options. 07:29.610 --> 07:34.530 OK, let's reload once again and fill a text area and inputs as well. 07:35.520 --> 07:38.210 But now let's miss checking the correct answer. 07:39.210 --> 07:46.530 Click on insert and you see that it works, but actually it's a problem. 07:46.530 --> 07:52.680 Again, we don't want to store in local storage question, which won't have the correct answer. 07:53.280 --> 07:56.400 In order to fix that, we need to write another if statement. 07:57.630 --> 08:03.060 But before we actually write if statement, we need to declare another variable. 08:03.780 --> 08:05.940 Let's call it is checked. 08:08.370 --> 08:17.040 This variable will hold boolean value and as a default, let's assign to it false right e equals default 08:18.120 --> 08:24.450 inside if statements we have a condition which checks, if the button is checked and the value of checked 08:24.450 --> 08:26.510 input is not empty at the same time. 08:27.090 --> 08:32.450 So if this condition is true, then we need the value of E checked variable to be true. 08:33.210 --> 08:34.980 So we need to write it here. 08:35.190 --> 08:36.990 Is Chad equals the true. 08:40.130 --> 08:47.040 And the next thing is to create excitement and as a condition pass is checked variable. 08:47.210 --> 08:55.580 So right, if that huskier dimensioned is checked variable and again, surround those lines of code 08:55.580 --> 08:56.300 with Culebra. 08:57.770 --> 08:58.250 All right. 08:59.270 --> 09:03.140 Now we need to write our statements and use again alert method. 09:03.470 --> 09:04.330 What else? 09:04.340 --> 09:12.320 And then inside the code, Brice's write alerts with the text you missed to check. 09:12.860 --> 09:18.370 Correct answer or you checked answer without Bellvue. 09:19.880 --> 09:22.830 Let's go to the browser and test how this actually works. 09:23.690 --> 09:31.320 Let's field question text area then inputs and mis checking the correct answer. 09:32.000 --> 09:35.990 Click on insert and you see that we have a message. 09:36.680 --> 09:37.740 You missed the check. 09:37.760 --> 09:40.880 Correct answer or you checked answer without value. 09:42.710 --> 09:43.280 All right. 09:43.640 --> 09:44.280 Perfect. 09:44.540 --> 09:46.050 Everything works fine. 09:47.120 --> 09:54.770 The last thing that I'm going to do is to organize code inside if else statements. 09:59.650 --> 10:01.970 OK, now it looks better. 10:02.860 --> 10:09.280 So before I finish, I want to recommend you to consider after each lecture the code that we are writing 10:09.610 --> 10:11.350 and test them on your own. 10:12.010 --> 10:19.060 During this project, we are using advanced JavaScript, so sometimes it's a little bit hard to understand. 10:19.600 --> 10:23.830 So my advice is not to copy the code only, but understand it. 10:25.090 --> 10:26.830 All right, let's go ahead.