All right it's time for the next challenge. 1
The goal of this challenge is to transform our compose page. 2
So whereas previously we only had an h1 and a text box, a single input that allowed us to put in a single 3
line piece of text and then we had a publish button which would submit our form and get the data that's 4
entered here into our server app.js. The new compose form that you're going to create as a part of 5
this challenge looks something like this. 6
You'll notice that we've got bootstrap enabled on both of these inputs 7
right? 8
So this one is a single line and this one is a multi line text box which you'll have to add in using 9
HTML. And you also need to make this publish button blue and look like this. 10
We've got some extra labels in hand. 11
We've got an extra text box that's put in using bog standard HTML 12
and then we formatted this form using bootstrap. 13
This is the end goal. 14
Pause the video now and make your compose page look the same way as this. 15
OK so here's my first hint for you. 16
Over here we've got this extra text box. 17
You might think that you could add an extra input that's of type text but somehow make it multi-line 18
instead of single line. 19
But if you didn't know how to add this in then we would go back to our good friend Google and we might 20
search with something like multi-line text box HTML form right? 21
So if we take a look at the first answer on Stack Overflow it seemed like this person has the same question 22
right? 23
I want to get a multi-line input. 24
How do I do it? 25
And the answer 26
that had lots of votes and a checkmark is you need to use a textarea instead of an input. 27
So let's go ahead and try and add this textarea to our code. 28
So I'm just going to copy it over. 29
Currently in our compose.ejs I've only got a input that's of type text and a submit button. 30
So right before the submit is where I'm going to put in my text area. 31
See if that's enough of a hint to get you unstuck on this challenge. 32
Give it a go again. 33
Now my second div relates to how to use bootstrap to get the layout that we wanted. 34
So if we didn't know how to format our form using bootstrap then we might search for something like 35
bootstrap form 36
right? 37
So then we might click on the first link, forms and you can see this is an outdated alpha release. 38
Please visit latest bootstrap for stable release. 39
So let's go over there and let's go ahead into that documentation and search for form. 40
And you can see this is the docs for using forms. 41
Now if we look at the first example here you can see that they've got a label. 42
Then they have this input of type email and they've applied a class onto it called form control. 43
And if you remember way back from all of our bootstrap days everything that we do through bootstrap is done 44
by applying classes to individual HTML elements. 45
We seem to need this div called a Form group around our form elements and then we need to apply this 46
thing called form control in order for the inputs to be formatted in the way that we want it to. 47
And finally they've got exactly the same button that we want and the classes are being applied onto 48
the button as well. 49
So see if this is enough of a hint to enable you to complete this challenge. Give it another go. 50
All right. 51
This is my third and final hint. 52
And this hint relates to having a little bit of separation between the button and these inputs. 53
Some of you guys might have applied the bootstrap to your form but you're not getting this exact appearance. 54
Instead your button is stuck right next to that text area. And the hint for solving this problem is if 55
you look at the bootstrap documentation and just check to see what this div form group actually includes 56
And what does it not include. What's inside it and what's not inside it. 57
And that will be the answer to help you solve this problem.