In this lecture, we're going to give the functionality to clear this button, which will actually clear
up the entire list.
This is the main and only job of this button.
All right.
The first thing that we are going to do is to set event listener on this button.
This element is already selected because we have disabled it during editing the questions in order to
attach to it at the event listener.
We have to go again in controller module.
So let's select these elements.
Right.
Selected items.
That question's clear and.
And then at event listener.
Inside the parentheses right click event.
We're going to use your anonymous function because the method for clearing the question list will hold
a parameter.
Then let's create the method itself.
This method will be the part of UI controller module.
So let's go to UI controller module and create a new method.
Let's call it clear question list.
Assigned to its anonymous function.
So, as we said, this function is going to hold parameter because of that, we need to have access
on local storage, therefore we have to place here as a parameter storage question list.
All right, let's invoke dysfunction, go to controller module and insight, anonymous function, right,
UI controller.
That clear question, at least.
So, as we said, we need to have access on local storage, therefore as an argument, we need to pass
with a controller that gets question local authority.
All right.
That's the first test, how this function works right inside clear question list function Castlewood
log.
And I'm going to pass here the parameter storage question list in order to see, again, how this object
looks like.
Let's go to the browser.
Revolt.
Click, click on this button.
And we have in council local storage object.
As you know, this object contains three methods for getting questions, for setting them and also for
removing the questions in this lecture, we will use remote question collection method in order to clear
up the list.
All right, let's go back to your brackets so we want clear button to do its job, if we have at least
one item in question list for doing that, we have to use if statements, let's delete cancel that log
and then.
Right, if.
As a condition, we have to persevere.
The length of question list arrived to be greater than zero.
So.
Right, historic question list.
That dog gets questioned collection.
Land use, land, property.
Which is greater than zero.
So clearing the entire list is an important and kind of dangerous thing for admin because with just
one click, he or she might lose all the questions.
When we deal with such things, we always need to warn the users.
And for that we can use confirm method.
Let's create variable and call it call.
Which equals to confirm.
So this method gives us a pop up message like alert method, which allows users to answer the question
either with accepting or refusing, and the user can do it simply clicking on OK or cancel buttons,
confirm method returns, boolean value, true or false.
So if the user clicks on, OK, it's true.
And in case of clicking on, it returns false.
That's right, Willow Castle, the plug and play CEO, the variable called.
That go to the browser reloader page.
Then click on Khelil this button.
You see that we had a pop up message with OK and Kastle buttons, so if we click on OK, we will get
through in council and then if we click on council, we will get false.
All right, that's the way how confirm method works in JavaScript, actually, we need some warning
message here.
So let's write warning.
You will lose entire question, at least.
OK, so if admin accepts on that message, then we need to delete the question list for that, we have
to use another if statement.
Let's delete Castle that log and write if.
As a condition, we have to pass here to variable costs.
So if this condition is true, if I had accepted that in order to delete a list, we need to write.
Storage question list and then use method from local storage object, which allows us to delete the
entire list.
So that's right, remove question collection.
All right, let's go to the browser at first I'm going to ask a question.
Then at another one.
Then go to application and display local storage.
Click on Clear List Button.
So we have here confirmed message.
Click on OK, and you see that both key value pairs parts are deleted, but actually questions are still
displayed in question list for disappearing them.
We need to reload the page.
So you see that questions are no longer displayed in question list, but at the same time in local storage
there is created New Hampshire, right?
That's because of previously created if statements.
Which always prepares local storage when questioned collection equals to now, in other words, when
needed, key doesn't exist.
All right, let's go back to clear question this function and make a question list and to dynamically
it's very simple.
We just need to write Dom items.
Got inserted questions rather than use in HTML property.
Which equals two empty equals.
Let's go to Browsr, reload the page and then add the question.
Click on Close Button.
Then OK, and I see that question is deleted and it's disappeared dynamically.
OK, everything seems to be fine, but there is one little problem if we click again on clear this button,
then in console we will get an error, which tells us that JavaScript engine cannot with property left
off.
Now, I'm sure you've guessed what happened here because it's a known error for us.
It happens because when we clear the question list and then again, click on clear this button before
reloading the page, there is not created new right gets question collection method gives us the value
now and therefore we get an error.
Makes sense.
OK, we can simply fix that problem for that, we need to use another if statement and surround all
this code with its color prices.
So right at the top, if then as a condition.
Right.
Storage question at least.
That gets questioned collection.
Not equals to now.
And then place all the code inside that the if statement.
All right, so now everything is ready, let's go to the browser again, reloader page.
Then at question.
Click on Clearly Button.
Then OK, and I see that list is a. let's click again on Clear List Button and you see that we don't
have any error here.
All right, perfect.
We have just finished the program, one more button.
I think it was very easy to understand.
So let's move on to the next lecture.