After displaying the question, now let's work on Progress Bar, it's very easy to program, we just
need a couple of lines of code.
First of all, let's take a look on index dot extremophile.
So here we have deep elements, which includes progress and progress element in paragraph, we will
display current question and the total amount of questions.
As for the progress element, it has two attributes value and marks.
In this case as a default, we have value as authority and marks as hundred.
It means that 30 percent of the total line is filled up.
So in order to display our progress, we need to connect these attributes to our question items.
All right.
The first thing that we have to do is to create a new method.
Let's call it display progress.
Then assign to each anonymous function.
This function will hold two parameters like it was in case of this play question function, because
of that, we want to get access on local authority as a first parameter.
Let's pass your storage question list.
And as a second parameter, because of that, we need to define index of question, let's place your
progress.
OK.
Now invoke display progress function, go to a controller module and write up a controller that display
progress.
As I first arguments, we have to place cruise control or DOT get questioned like local storage.
And as the second arguments.
We need quick progress there for right quick control the dots gets quick progress.
All right, as usual, let's test if display progress, function works right inside each console that
log.
Works.
Go to the browser.
And you see that it works.
OK, now we want to get access on progress elements, therefore we need to select it in dump items object.
Let's go to their.
And create new property.
Call it progress bar.
That selectees elements, right, documents that.
Carie Selecter.
And plus, your progress element.
By the way, do appreciate how convenient is to use more dupatta, we have already large code, but
it's not difficult to figure out where to write things, also where to find them and so on.
That's the power of modu pattern and I really love it.
All right.
So as we said, Progress Element has max attributes which should define the total amount of questions.
Therefore, we need to use this attribute and assign to its length of question collection.
So.
Right Dom items.
That's progress bar.
That's Max.
Equals to storage question list that gets question collection.
And then.
You here the length property in the same way we have to define the value of progress element.
So that's right, Dom.
Items that progress per.
That value.
And now we need to use question looks so right, your progress dot question index.
But only question in this is not enough, because, for example, first question has index number zero,
but as a current number, we need to indicate one.
Therefore, generally, we need to increase question index by one Sirait plus one.
Then go to the browser without.
We have here only one question and therefore Progress Bar is totally filled up, let's add one more
question.
And you see that now the half of progress bar is filled up.
All right, last thing to do is to display the current number and total amount of questions.
Let's go to index of file.
We need to select paragraph, which has I do attribute progress, let's copy it.
Then again, inside dome items, object creates new property, let's call it progress paragraph, right,
progress, power.
Then documents that get elements by ID.
And paste here, I'd attribute progress.
Then go back to display progress, function and define the text conference of progress, paragraph elements
for that we have to write, don't items start?
Progress per.
The text contains.
So, as we said, the first number indicates the current question number, it's actually the value of
progress element.
So we need to right here progress that.
Question index.
Plus one, actually, parentheses is not mandatory here, but just to distinguish better, I use them,
so then we need to write plus and slash.
And then as a second part, we want to right here the total amount of questions, right storage question
at least that gets questioned collection.
That length.
All right, everything's ready.
Let's go to the browser.
You see that we have one as a current question and two as total amount of questions, let's add one
more question.
And you see that we have three questions and also the progress bar is updated accordingly.
All right, that's it with several lines of code.
We just got really nice results.
So let's move on.