In this lecture, we're going to make clear the question text area and inputs software insert in the
question.
And also we're going to define some rules which admin should protect during adding the questions.
All right.
So all of this data is coming from local storage.
Let's go to application and see how it actually looks.
So you see here our questions in question collection are it's available to see on the part of the data.
But actually all the data is placed here.
We're able to manually delete all the data we need to just press these delete.
I could.
All right.
So the first thing that I'm going to do is to clear the text area and inputs and also uncheck the radio
button after clicking on insert button.
I mean, when we fill the inputs, then check the correct answer and then click on insert button.
The contents of question and options are not clear and also the correct answer is still checked.
OK, let's fix that.
Go back to brackets.
After all of these steps, I mean, when we create a question object, then get question collection
array from lack of storage and then add to it new object and inserted in local storage, we need to
clear text area inputs and also uncheck the correct answer.
All right, let's start from question text.
We need to write this code after the last line where we insert data in local storage.
So in order to make text area clear, we can do it very simply.
We just need to write new question.
Text dot value equals to empty strings.
As for the inputs, we may have at least two of them.
So we need to use for a loop right here for as a counter, I'm going to use variable X because we have
already used AI.
The rights variable X equals to zero.
Then we need to condition X is less than options that length and then X plus plus.
In order to make the inputs clear, we have to write the following options X that value equals to empty
swings.
OK.
As for the radio buttons, we need to check the property to be false.
So writes Options X again, I'm going to use here previous element sibling property because radio buttons
are placed as previous siblings for input elements in HTML document.
So right here that previous sibling than docs checked equals the false.
All right, let's test how it works, go to the browser, reload the page and then type here something.
Check the correct answer.
Click on insert, and here we go.
New question is added to local storage and also text area and inputs are empty and the radio button
is unchecked.
OK, great.
It works fine.
But there is another problem.
If I click on insert, the empty question will be added.
Actually, we don't need it and in order to prevent it, I'm going to use several if statements.
So let's start from a question, text, creative statement and as a condition, write new question text.
That value not equals to empty strings.
And now we need to place all of this code inside that if statement and after that we need to write our
statement in which we will were adamant about the mistake.
For that, there is a very simple and handy way in JavaScript we can use alert.
PopUp box alert is a JavaScript built in method which actually pops a box with some text.
So let's use it right alert and inside the parentheses lets place text as a string, which we want to
be popped up.
Right.
For example, police insert question.
All right, let's go to the browser, reload the page, live.
The question, text area empty and fill the options, then check correct answer, click on insert and
you see that we have a warning message which tells us, please insert the question.
All right.
Perfect.
Let's go back to Brackett's and move on to the next false statements, which actually checks if options
inputs are empty or not.
You know that we store the values of the inputs in option array.
Also, you see that in order to add input value to options array, it should not be empty.
OK, we want at least two inputs to be filled.
So as a condition in your statement, we need to indicate the length of options array to be greater
than one.
So create another if statement and as a condition, let's pass your options array that length.
Is greater than one.
And again, surround all these lines of code with Eve statements, Calabrese races, and then we need
Elsas statement with another pop up message.
So I'm going to use again, alert method.
Right.
Our statement then is articulable basis, right.
Alert and place here.
The text, you must insert at least two options.
All right, let's go to the browser and test again, reload the page, then fill the text area in order
to avoid popping up first a loud message, then leave both input's empty.
But anyway, check the radio button, click to insert, and you see that we have a warning message telling
us that you must insert at least two options.
All right, let's reload again.
Fill the question text area, then insert something in one of the options and live another one as empty,
then check correct answer.
Click on insert and you see that again, we have the same message.
It's because in this case, Options Array includes only one item and the condition inside if statement
is false in order to work it properly, we need to fill at least two options all the time.
I mentioned at least two options because we have just two of them at this point.
But as we proceed building the app, we will add functionality to it in order to add more options.
OK, let's reload once again and fill a text area and inputs as well.
But now let's miss checking the correct answer.
Click on insert and you see that it works, but actually it's a problem.
Again, we don't want to store in local storage question, which won't have the correct answer.
In order to fix that, we need to write another if statement.
But before we actually write if statement, we need to declare another variable.
Let's call it is checked.
This variable will hold boolean value and as a default, let's assign to it false right e equals default
inside if statements we have a condition which checks, if the button is checked and the value of checked
input is not empty at the same time.
So if this condition is true, then we need the value of E checked variable to be true.
So we need to write it here.
Is Chad equals the true.
And the next thing is to create excitement and as a condition pass is checked variable.
So right, if that huskier dimensioned is checked variable and again, surround those lines of code
with Culebra.
All right.
Now we need to write our statements and use again alert method.
What else?
And then inside the code, Brice's write alerts with the text you missed to check.
Correct answer or you checked answer without Bellvue.
Let's go to the browser and test how this actually works.
Let's field question text area then inputs and mis checking the correct answer.
Click on insert and you see that we have a message.
You missed the check.
Correct answer or you checked answer without value.
All right.
Perfect.
Everything works fine.
The last thing that I'm going to do is to organize code inside if else statements.
OK, now it looks better.
So before I finish, I want to recommend you to consider after each lecture the code that we are writing
and test them on your own.
During this project, we are using advanced JavaScript, so sometimes it's a little bit hard to understand.
So my advice is not to copy the code only, but understand it.
All right, let's go ahead.