Here we go.
This is another cool example.
I'm super excited.
Hope you are too.
And we're going to smash it together.
Seriously, we are.
And it's really cool because we're using a progress element on a form.
Let's say we've got a form with multiple questions.
Let's even say you're designing a questionnaire.
You might want to give the user a visual representation as to how far along they are in the entire process.
And you might want to give the user some encouraging messages along the way.
So that's what this example is all about.
We've got a form and I've only got five questions. And I've just done inputs where it's type attribute
has been set to text.
Very, very simple.
I know, I know.
It's a very simple form.
Even the styling, you know, I haven't gone crazy.
But you'll notice that when we land on the default page here, we've got a message, "The form, its
calling you". And we've got a progress bar.
But the progress bar right now is empty.
But as soon as we start off with one question and the user starts typing, wow, how cool is that?
Firstly, the message has dynamically updated. The progress bar has dynamically updated, and the user
has a visual green background displayed to him or her showing that this is now a valid input.
How awesome.
And let's do the second one.
Same thing.
Progress bar is updated and we have a new message.
"Eggcellent.
Keep on cracking."
Of course, when we go on to the third question, we get another message.
"Champion. Don't stop."
The progress bar keeps going up.
We get new messages.
And when we hit question number five, we've got one final message, and that is go on, push submit.
You're giving the user encouragement to submit the form.
Very, very cool example, very practical example.
But can you think about how to do it?
Yes, we have to use JavaScript and whenever you think about JavaScript and dynamically updating things,
you've got to think, okay, what event are we listening for?
You can probably listen for quite a few events here.
I chose in the solution video, which you'll see, to listen for the keyup event.
So every time, you know, basically a character is entered into that text field, I want to loop through
all of our inputs, figure out how many are valid, and then depending on how many are valid, we then
update that progress bar.
So, for example, if nothing is entered into question two, the progress bar needs to decrease because
we've looped through this collection of inputs, and we've only determined that now 4 are valid out
of 5.
So I know it's a bit tricky because we're going to have to loop through something.
We're going to have to get a collection of all these inputs and then we have to keep track, aka we
have to create a variable keeping track of how many inputs are valid.
I know it might be a bit advanced, I know that, but stick with me.
I believe you can do it.
We've done a lot in this course already and yeah, give it a crack.
Give it a go.
Even if you can only do the HTML, that's fine.
There are 3 elements to this solution, by the way. It's (1) building the HTML, it's then (2) styling the HTML with
CSS, and finally (3) it's adding JavaScript.
So I want to split the solution into 2 videos.
One, dealing with HTML and CSS.
And the final part of the solution will be dealing with the JavaScript.
Hope you're having a lot of fun, and I'll see you in the solution videos.