Did you give it a go?
I hope so.
But if not, it is a bit tricky, so don't worry.
I'm going to be showing you how to do it now.
But think about it ... before we start on the JavaScript,
just think about how we will go about doing it.
Firstly, we've got to listen for an event. And when the user starts typing in this input box, I'm going
to be listening for the keyup event.
It probably doesn't have to be the keyup event.
You could have probably listened for when the user clicks out of the box, like the blur event, for example.
It doesn't matter.
You just have to listen for an event that's appropriate.
I'm going to listen for the keyup event.
Every time that event is fired,
we have to now determine how many of these input elements are valid, because this progress bar has to
tell the user how close they are to completing the form.
So when there's only ... and this is the reason I chose 5, by the way, because when there's only one
question that's valid, we know that 20% of the progress bar is complete.
In other words, we want to dynamically update the value attribute of the progress element to 20. When
two are selected, we want to update it to 40, then 60, 80.
And when the last question is hit, I don't actually want to do it as 100.
I want to do it very, very close to 100 because the user still has to click on submit.
So it's just a very easy way.
That's why I chose 5 numbers because 100 divided by five is 20. Very easy jumps
we are doing so. That's the first thing we've got to do with JavaScript.
We have to find a way to loop through all those inputs, figure out how many are valid. And the ones
that are valid
we count, right?
If there are two valid, we show 40.
If there are three valid, we show 60, etc etc.
The second thing we want to do is we want to show dynamic messages to the user.
Right now the message is "The form, is calling you".
But as you saw in the introduction video, we want that to change.
So those are two things we have to change every time we listen for the keyup event.
Have you got it?
Cool.
Let's get cracking.
Let me expand our editor here.
So now we're going to be getting into JavaScript.
Remember, JavaScript has to be included in script tags.
Okay.
This is where we need to just think logically through this.
The first step should be to grab all of our elements we need from the page.
Let's grab all of
our elements.
How do we do that?
Well, very easy.
Let's first grab our progress bar, and put it in a variable called progressBar.
I know, very boring, but it's very intuitive.
We can do so by accessing our document object,
getElementsByTagName().
The tag name we want to get is "progress".
And remember that when we use the getElementsByTagName() - you'll know if you've done my DOM courses -
this returns an HTMLCollection. But we don't want a collection.
We want the actual progress bar itself.
And if you look at our HTML, we only have one progress element.
So therefore we can just access the first item in that collection.
So there we go.
We've got our progress bar.
How easy.
The next thing I want to do is I want to grab our message element, right, our message, because we want
to dynamically update that as well.
We wrapped it in a div, and we gave that div an ID of message.
So here I'm defining a variable called message in JavaScript, and we want to get it, right,
document.getElementById(), and the ID we gave it was message.
So there we go.
We've got our message, we've got our progress bar.
The other thing I want to grab is our form because we're going to be listening for events on the form
itself.
(sound effect: what!) Whaaat? Shouldn't we be listening for the events on the actual input elements, not the form?
Well, if you've done my DOM courses, you'll know this, but events, not all events, but a lot of
events, bubble.
They bubble up through the DOM tree.
So even though the event is being fired from an input element below, we know that that event will bubble
up to the form element itself.
So that's why we can actually listen for all events on the form element, and we don't have to individually
add an event on every single input element.
So in order to listen for an event on the form, we obviously have to grab our form.
So we grab our form by accessing the document object, getElementById() again.
And we gave it an ID of mainForm, right?
If I scroll up, we gave our form an ID of mainForm.
Cool.
So we've got our progress bar, we've got our message div element, and we have our form.
The last thing we need is our required inputs.
The reason we need all of these inputs, scroll up, all of these inputs, is because we have to loop
through each one to determine how many of them are valid.
Right.
Because that's going to determine the values of our value attribute and our message.
So let's define a new JavaScript variable called requiredInputs.
And yes, we are accessing the document object. On here,
we can getElementsByTagName(), and the tag name we want to get is input, not inputs, input.
Now remember, this getElementsByTagName() returns a collection, but this time we want to keep the
collection because we need to loop through that entire collection to determine how many of these inputs
are valid.
It's not the same with the progress bar.
Remember the progress bar?
We only have one progress bar and that's why we access the first item in the collection with that zero
array syntax retrieval method.
I want to add an event listener on the form itself and remember,
we can do this because the event of keyup will bubble up the DOM tree.
That's just so that you remember how or why we can do this.
So let's grab our form element that we defined above, or our variable,
and on here, you guessed it, we want to add an event listener.
The event we want to listen for is the keyup event.
And when the keyup event is fired, we want to execute our code, our business logic, and it's all
going to sit within these curly braces.
What are the steps here?
Well, the first step is, let's define a variable that keeps track of all the valid inputs.
So right now, when we initiate the page load, we know that our validInputs variable, we've just
made that up,
we're going to set that at zero.
There are going to be zero valid inputs, right,
initially.
The next thing is, and I keep saying this, is we need to loop through all of the inputs
in our collection
and determine if they are valid.
If an input is valid,
then we want to increase
our validInputs variable.
Does that make sense?
I hope so.
Actually, you know what,
let me just show you first that this is a collection.
So all I want to do is I want to console log our requiredInputs to the console.
So let's go to the browser.
Let's inspect this element.
Go to the console and write,
let's type the letter "a", and there we go.
We've got an HTMLCollection.
That's just what I wanted to show you.
I wanted to prove it to you.
And it's got all of our inputs in here.
Okay.
It's got length of 5, so that makes sense.
Sorry, I just wanted to show you before we kept going on.
So there we go.
We've got a collection. We know that requiredInputs is a collection.
So how do we loop through it?
Well, we can use the for...of JavaScript method, right.
The for...of method.
And how this for...of works is it's very, very simple.
It loops through each item in this element.
Let me open this up.
It's going to loop through each input, and on the first loop it's going to give us the first input as
an object and we can define that object as anything we want.
Let's define that object as input, because that's what the object is.
It's an input.
And then you've got to define the collection that it's looping through.
In our case, it's the requiredInputs collection.
Okay.
So every time it loops through, what do we want to happen?
Well, we want to check whether that input is valid, right?
Whether the valid property exists, whether it's on.
So what we can effectively do is just do a simple IF statement.
We can grab our input that it's looping through, in its current iteration, and we can access its validity
object.
Within there there's a property called valid.
And if that is true, this IF statement will execute.
And if it is true, we know it's valid,
and then we want to grab our validInputs variable and we want to increase its value by one.
That's just what the plus plus ++ means.
We grab it and we increase its value by one.
And this is very crucial code because this is the entire looping code we need.
It's going to tell us how many valid inputs there are, and it does work, right?
So after this loop, why don't I just here console log valid inputs and I'll show you.
Let's go to our browser.
Let's refresh everything. And let's just do question one - type the letter "a", we've got a valid input
of one.
Let's do question two.
Now the number is two, and three, and four, and five.
How awesome.
This is perhaps the hardest bit of code.
And we've done it.
And you can see it wasn't that difficult, was it?
Let's go back here and let's finish this off because now we've got how many inputs are valid.
And that is crucial, crucial for us.
It's very, very simple
now to finish off, because all we have to do now is change the value of the
progress bar and the message
depending on how many inputs are valid,
are valid, i.e. depending on the value of the validInputs variable.
Is this making sense?
I hope so.
So all we have to do now is just define multiple IF statements,
right.
If the validInputs
is one,
then what do we want to happen?
Well, we want to grab our message variable and we defined that as that div with an ID of message.
If I scroll up in our HTML, we are literally grabbing that div
with ID of message.
That's what we're doing. And we want to change its innerHTML property to, I don't know, because it's the
first input they've done,
let's just give them a bit of encouragement.
"Nice. Good start."
So now we've changed the message.
The next thing I want to do is I want to affect our progress bar.
We gave it a variable name of progressBar.
We want to access a method now and the DOM or HTML gives us this method, setAttribute(), and we want to
set which attribute?
We want to set its value attribute, and we want to set its value to what? You guessed it, 20 because only
one input is valid.
So if we go to our browser, let's get rid of the console now. And let's type "a" in question
one. How awesome is that?
The progress bar is updated and the message has been updated to us as well.
I hope this is putting a huge smile on your face â˜º.
It really, really is cool, isn't it?
All right.
But we're not finished, are we?
Let's keep working through this.
We need another one.
Another one, Another one, Another one.
So let's say this is number two.
If there are two valid inputs,
what do we want to say?
We can say "Eggcellent.
Keep on cracking."
And of course, this value is going to be 40.
Uh, this one's going to be three.
This one's going to be four, and this one's going to be five.
This is going to be 60, 80.
And like I mentioned in the introduction, let's have 95 rather than 100.
The last comment can be,
"Go on, push
submit."
When we're 80% done, we can say
"whoop whoop, almost done." When you are 60% done,
we can say "Champion. Don't stop."
Let's go to our browser and let's give this a test. Question
one, "Nice. Good start".
Question two, "Eggcellent.
Keep on cracking."
Question three, "Champion. Don't stop."
Question four "Whoop whoop ... almost done."
And
question 5 "Go on, push
submit."
Come on.
How awesome is this?
Oh, I hope you're smiling right now.
I hope you're having a lot of fun.
Very, very cool example, isn't it,
to show you how we can use the progress bar in a very practical way on forms.
I know I could have styled this a bit better.
We could have done a few more things, but I wanted you to at least have the skill set to now be able
to apply it to real life applications.
And I hope you understood everything.
If not, ask on Q&A.
I'm here to help you. There are many different ways to also, you know, to code.
You know, I'm not saying my way is the best way.
Obviously, if we remove these things, it goes through the loop again and it updates.
So yes, there are many different ways to do something.
This is just one way.
But anyway, before I start babbling on too long, let's move on.
See you in the next lecture.