This is a really, really cool example because we're applying the progress bar to a form and this course
is all about forms.
How do we build it?
Well, there are 3 facets.
There's the HTML, the CSS, and of course, the JavaScript.
So let's start off with the HTML.
Then we can continue on to the CSS and finally we can finish off the JavaScript.
So let's start with HTML.
Yes, we're going to need to style,
so let me just set everything up. But for now we can just leave that blank, and wrap everything within
a body.
I do want a form
because, you know, this is an example of a form.
Let's actually give it an ID of mainForm and then we can wrap everything within here.
We can have a heading called Progress Form.
And then what I want to do, is I want to create our progress.
Remember, it's at the very top under the heading and I want to wrap this in a div.
Let's just give it a class of headingWrapper for lack of a better word.
And within this div I want to include our progress bar.
I want to give it those two important attributes.
Do you remember what they are?
That's right.
I want to do a max attribute of 100 and the starting value is going to be zero.
I want to give this an ID as well, just so we can grab it later in JavaScript and let's just give it
an ID of progress.
Very, very simple.
The other thing below this progress bar was what?
That's right.
There was a cool funky message to the user.
So let's wrap that in a div and give it an ID of message.
And the default value can just be "The form, its calling you".
So there we go.
We've got our heading, we've got our progress bar and we've got the message displayed below it.
Let me go to the browser.
Let's refresh and this is what it looks like.
You can see it's starting to take shape. Below this,
we obviously want all the input elements, and then below that the submit button.
So let's quickly create that now.
We are still in our form.
And we don't have to in this example,
but I want to just, you know, you need to get in the good habit of creating labels with every form
control to improve user experience.
So let's create a label.
This can be question one, and of course, question one, and we can create an input of type text.
We don't need a name attribute here.
The ID has to match the for attribute, which is q1.
And remember what I said?
I want all of these to be required.
And in order to do that, yes, we include the required attributes on the input type of text.
Okay.
So there we go.
That's our question one.
And we literally need to do this 5 times, right?
This is two.
two.
Two.
Three.
Four.
And five.
If we save this, we go to the browser refresh and boom, we've pretty much done our HTML.
How quick is this?
Let's just go here.
And the last step is to create our button.
So we want a button element, with its type attribute set to submit.
We save this, go to the browser and there we go
my dear students! We're done with the HTML.
How quick was that?
I know we're cruising very quickly, but I think you're getting the hang of all of this now.
So let's quickly now take all our HTML, which is done, but apply CSS styling to it.
Okay. Let's grab our body element, change its background color to what?
Let's do #333.
You know what,
shall I put it side by side?
Then you can kind of see how it's progressing as we go on.
I want the line height to be slightly higher than usual.
So let's do 1.2.
So all these little subtle things that really make a difference.
I want to add padding, say 20 pixels.
There we go.
I don't like, you see how all the input elements and the labels are displayed inline by default.
So why don't we take our label, our labels, and we'll affect their display property to block.
And we can also change the color of the actual text to the same color as the background.
I know you won't see anything now, but we're going to change the background color of this whole form
shortly. And then the margin on the bottom,
I just want to affect that.
Let's do 5 pixels.
There we go.
Actually, before I move on, let's just quickly grab our main form.
Remember, we gave it an ID of mainForm.
Can you see it?
That's all we're doing here.
And I want to give it a background, just so you can see what's going on
otherwise, you're going to get confused.
And let's just do a nice blue color, right?
There you go.
Now you can kind of see what I'm doing.
I also don't want the form stretched across the entire screen.
So let's give it a width.
Yeah, that's better.
I don't like the squareness of it.
So in order to affect that, we've got to change its border-radius property.
Let's just have a small rounded edge.
There you go.
It's coming on.
And then let's give it a nice padding.
It starts at the top, right,
bottom left.
Look at that.
You can already see it's starting to take shape.
So there we go.
That's our main form.
There's our label.
And if I didn't have this margin, bottom, bottom, let me show you what happens.
It's just too bunched up.
The input element is so close to the label, which is why I just added 5 pixels below it.
Okay, we've affected the styling of the label.
What's next?
Well, we haven't done the input itself, have we?
So let's grab the input.
The width here,
why don't we get that stretching across the entire length of the parent, so we can define it as 100%.
There we go.
And obviously it doesn't hit the edge because we've given it 20 pixels of padding.
You know, if we actually gave it zero pixels on the right of padding, then it would hit the edge.
That's why we gave it padding.
It just looks nicer.
So there we go.
That's the width of 100%.
The display property,
I don't think it shouldn't actually matter here.
And we've defined the labels as blocks, but I just want to put display block because intuitively that's
how I think they should be.
And then let's give some padding to each input box just to make it a bit bigger.
Now what I want is I want to remove the outline, right. When the user selects an input,
can you see that black outline?
I don't want that there.
So let's just basically define it as zero pixels.
So when the user now toggles each one, there is no outline.
It's also got a border if you can see it.
But I don't want the border.
So let's also just get rid of that and all the input elements are too close to each other.
So let's give it a margin bottom of 10 pixels.
That's coming on quite nicely.
We've defined styling for the label, the inputs ...
what else?
We've got the button, right?
So let's grab our button.
Let's quickly style that.
We can give it a background of the same color as the actual background on the page.
The width can be 100% padding.
There we go.
10 pixels looks fine.
Margin top,
it's a bit too close, right, to that input box.
There we go.
Looks better.
Font size,
let's increase it a bit.
1.1em.
Yeah, that's better.
Color can be white.
I don't like that default border on this button either.
So let's define a border of 1 pixel solid
dark black.
Yeah, I think that looks nice.
Cursor can be a pointer, just so the user knows it is actually a button.
And then why don't we give this a box
shadow property?
Right.
Very quick.
Very quick, very quick.
We've done this all before.
Yeah, that looks nice.
That looks nice.
Just to make it kind of tie in with the form, I don't like the squareness of this button.
And in order to change that, we affect the border-radius property.
Let's just make it slightly rounded corners.
There we go.
Okay, so that's the button.
What else do we have to do?
Oh, we want to do the header, right?
It doesn't look that great at the moment.
In order to style that, we gave it a class of headingWrapper.
That's right.
Class of headingWrapper.
Font size,
let's make it a bit smaller.
Color white.
There we go.
Text align,
let's get this thing in the center. Man, you can see how nicely and how quick this is.
It's really, really cool.
And let's just give this a margin,
right?
Top of 0, right of 0, bottom 20 and then left of 0.
So we are just effectively doing margin-bottom.
I don't have to do that.
I could just go margin-bottom 20 pixels.
It's the same thing.
Next, I want to just style a little bit of that progress bar.
I don't like it that it's bunched up in the center like that.
So let's grab our progress element, and let's make it a bit higher.
Yeah, that's better.
And I wanted to stretch across the entire width of the form.
There you go.
And it doesn't hit the edges, remember,
because we've given the edges 20 pixels of padding.
Maybe it's a bit close to the text beneath it.
So let's give also some margin-bottom,
I don't know, of
3 pixels.
There you go.
Then the final thing I want to do,
remember, these inputs are required fields.
If the user types, there's no visual feedback that you know it's valid.
All we have to do,
do you remember?
That's right.
We target our inputs, and we want to target the :valid pseudo class.
And all I want to do is change the background color to a nice light green color.
How does this look?
Let's go
here.
Let's type ....
Oh, that is just beautiful.
Let's zoom out.
And here we go.
HTML done ✅.
CSS done ✅.
The only thing left is ... JavaScript.
And what we want to do is we want to dynamically update this progress bar and the messages so that when
the user starts filling in the form, their progress bar kind of visually tells the user how far along
they are and the user gets different messages, motivational messages to keep going.
Think about how it is we can do it. Because I want to take a break now, and in the next lecture, let's
add JavaScript and let's complete this solution.
I can't wait.