OK, we ready to start coding and program or application.
Let's take a look, unfinished version of the app.
So the first section that we are going to program is admin panel.
Here we have text area for adding question, text and input for adding the proper options as a default.
We have two inputs, but if we focus on the last input, it automatically adds new input.
So here we have radio buttons for managing.
Correct answer.
Let's type your something and then check correct answer after clicking on insert button.
The question is added below in question list, we are able to added question and change the content
of it and then update or delete the entire question using clear at least button.
We can delete the entire question list.
Actually, that's it from where we will start.
As for the results list, it will be programmed a bit later.
All right.
We have our working admin panel, but nothing happens here yet.
Let's go to brackets and at first remove this code.
The first thing that we need to create is function constructor, which actually will be a question constructor.
So that's right.
At first, coming to your question, constructor.
And then create a function constructor and call it question.
You already know that function constructor is used to create brand new objects in very handy and dynamic
way, each question object is going to hold it text of the question, also proper options and correct
answer.
So we need to hear this parameters right inside the parentheses ID then question text.
Then options.
And the last one, correct answer.
And now we need to use this variable, which will point to question object that will be created soon.
So right inside the crisis, this ID equals to ID.
That this question text.
Equals to question text.
They that options equals the options.
And the last one they start correct answer equals the correct answer.
All right, in order to add questions, we need to use insert button, therefore it's time to select
it.
It is a part of user interface controller module, so we need to select it in UI controller.
Because of that, we are going to select more elements.
We need to create an object.
Let's call it dump items.
And I'm going to add your comment, the element that we want to select, I mean, insert button belongs
to admin panel section, so write your admin panel elements.
And here, let's right first property and call it question, insert an.
Let's take a look on the actual file and find insert pattern, you see that it has ID question insert.
And so let's copy it.
And right here, documents that get aliment by ID and inside the parenthesis, let's paste the ID that
we have copied.
Question insert BGA.
All right, this object is private.
It's not accessible from outside in order to make it public.
We need to return an object and then pass this variable in it.
So right return, then open the braces and now create property, call it get done items and assign to
that property as a value the variable dump items.
OK, now we can say that this object is accessible for controller, it's time to add event listener
on the button.
We need to do it in controller module so we have to select insert button for that.
We need to write UI controller DOT, get some items which we have just returned from UI controller,
and then we need to access unspecified button.
So right.
Question insert ptm.
Not at event listener.
Then create click event and also pass your anonymous function.
All right, now it's time to test how evangelist there actually works.
It is a good practice all the way to test if event listener works properly before you start writing
code for it.
So write inside the function.
Cancel the log works.
Then go to Browsr, inspect the page.
Then click on insert button and you see that it works.
All right, great, let's get rid of this council the plug before we proceed.
I'm going to make this code a bit smaller.
Because of that, we will select elements.
Often I'm going to start getting some items, property in a variable and then use this variable instead
of it.
So.
Right.
Selected DOM items, you know, that Dom Items is a UI controller.
So we need to write UI controller dot get items.
And then use this variable here, right, selected dumb items.
OK, the next step we have to do is to create a method which will manage adding the questions on local
storage.
Again, we need to make this method public.
So at first we have to return an object and then pass this method in it.
Those things should be placed inside this controller module.
So write your return, then open the process and then create a new method.
Call it at question on local storage.
Then writes anonymous function.
So as we said, using this method, we will add questions on local storage, this method will receive
two parameters, which actually we had to get from text area.
I mean, the question text and options from inputs.
So these two parameters should be a new question.
Text.
And then options again, we need to select those items in the controller.
I'm going to look at index dot file and find those items.
So here we have text every element.
It has a new question, text.
Let's copy it.
Then in a controller at property to dump items object, so right here, new question text, then documents
dot and use again, get element by Idy method and inside the parentheses, paste the ID that we have
copied.
New question text.
Then again, go to indicate that extremophile.
So we need now input elements which have class admin option.
Let's copy it.
And then in some items object, create another property, call it admin options.
Those elements have class attribute.
Therefore I'm going to use query selector all method.
So write documents dot.
Querrey, selecter of.
And inside the parentheses, let's paste here the class name admin option.
All right, it's time to call that question on local storage method, and we need to do it in control
controller module inside at even listeners function.
As you know, this method exists.
Increase controller module, so.
Right, Chris, controller dot edge question on local storage as remember, this method holds two parameters,
new question, text and options, which we have just selected.
So we need to pass them as arguments.
So right here, selected items.
That.
New question, text and then selected items, dot admin options.
All right, so the function is invoked now let's test if at question on local storage method works properly.
So right inside it.
Good luck.
Hi.
Then go to Browsr revolt and see that we don't have any errors.
Click on Insert and we have high in council.
All right, perfect.
I think it's enough for this lecture.
Let's stop here.
See you in the next one.