0
1
00:00:00,210 --> 00:00:03,220
All right it's time for the next challenge.
1

2
00:00:03,300 --> 00:00:08,640
The goal of this challenge is to transform our compose page.
2

3
00:00:08,640 --> 00:00:17,160
So whereas previously we only had an h1 and a text box, a single input that allowed us to put in a single
3

4
00:00:17,160 --> 00:00:24,360
line piece of text and then we had a publish button which would submit our form and get the data that's
4

5
00:00:24,390 --> 00:00:31,120
entered here into our server app.js. The new compose form that you're going to create as a part of
5

6
00:00:31,130 --> 00:00:34,300
this challenge looks something like this.
6

7
00:00:34,380 --> 00:00:39,350
You'll notice that we've got bootstrap enabled on both of these inputs
7

8
00:00:39,360 --> 00:00:39,660
right?
8

9
00:00:39,660 --> 00:00:46,890
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

10
00:00:47,000 --> 00:00:53,820
HTML. And you also need to make this publish button blue and look like this.
10

11
00:00:53,820 --> 00:00:56,470
We've got some extra labels in hand.
11

12
00:00:56,640 --> 00:01:01,780
We've got an extra text box that's put in using bog standard HTML
12

13
00:01:02,040 --> 00:01:05,810
and then we formatted this form using bootstrap.
13

14
00:01:05,880 --> 00:01:07,440
This is the end goal.
14

15
00:01:07,500 --> 00:01:13,900
Pause the video now and make your compose page look the same way as this.
15

16
00:01:14,140 --> 00:01:17,110
OK so here's my first hint for you.
16

17
00:01:17,590 --> 00:01:20,420
Over here we've got this extra text box.
17

18
00:01:20,530 --> 00:01:25,920
You might think that you could add an extra input that's of type text but somehow make it multi-line
18

19
00:01:25,950 --> 00:01:27,200
instead of single line.
19

20
00:01:27,460 --> 00:01:32,980
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

21
00:01:32,980 --> 00:01:37,410
search with something like multi-line text box HTML form right?
21

22
00:01:37,750 --> 00:01:45,150
So if we take a look at the first answer on Stack Overflow it seemed like this person has the same question
22

23
00:01:45,160 --> 00:01:45,560
right?
23

24
00:01:45,670 --> 00:01:48,590
I want to get a multi-line input.
24

25
00:01:48,640 --> 00:01:50,560
How do I do it?
25

26
00:01:50,620 --> 00:01:51,810
And the answer
26

27
00:01:52,000 --> 00:01:58,690
that had lots of votes and a checkmark is you need to use a textarea instead of an input.
27

28
00:01:58,720 --> 00:02:03,790
So let's go ahead and try and add this textarea to our code.
28

29
00:02:03,790 --> 00:02:06,430
So I'm just going to copy it over.
29

30
00:02:06,430 --> 00:02:14,140
Currently in our compose.ejs I've only got a input that's of type text and a submit button.
30

31
00:02:14,140 --> 00:02:19,380
So right before the submit is where I'm going to put in my text area.
31

32
00:02:19,690 --> 00:02:24,060
See if that's enough of a hint to get you unstuck on this challenge.
32

33
00:02:24,370 --> 00:02:25,500
Give it a go again.
33

34
00:02:27,140 --> 00:02:34,640
Now my second div relates to how to use bootstrap to get the layout that we wanted.
34

35
00:02:34,670 --> 00:02:40,310
So if we didn't know how to format our form using bootstrap then we might search for something like
35

36
00:02:42,130 --> 00:02:43,090
bootstrap form
36

37
00:02:43,100 --> 00:02:43,670
right?
37

38
00:02:44,000 --> 00:02:50,050
So then we might click on the first link, forms and you can see this is an outdated alpha release.
38

39
00:02:50,060 --> 00:02:53,000
Please visit latest bootstrap for stable release.
39

40
00:02:53,000 --> 00:02:59,920
So let's go over there and let's go ahead into that documentation and search for form.
40

41
00:03:00,410 --> 00:03:03,260
And you can see this is the docs for using forms.
41

42
00:03:03,320 --> 00:03:08,040
Now if we look at the first example here you can see that they've got a label.
42

43
00:03:08,240 --> 00:03:16,280
Then they have this input of type email and they've applied a class onto it called form control.
43

44
00:03:16,280 --> 00:03:22,910
And if you remember way back from all of our bootstrap days everything that we do through bootstrap is done
44

45
00:03:22,910 --> 00:03:26,780
by applying classes to individual HTML elements.
45

46
00:03:26,840 --> 00:03:34,490
We seem to need this div called a Form group around our form elements and then we need to apply this
46

47
00:03:34,490 --> 00:03:41,470
thing called form control in order for the inputs to be formatted in the way that we want it to.
47

48
00:03:41,480 --> 00:03:47,540
And finally they've got exactly the same button that we want and the classes are being applied onto
48

49
00:03:47,630 --> 00:03:49,340
the button as well.
49

50
00:03:49,340 --> 00:03:55,660
So see if this is enough of a hint to enable you to complete this challenge. Give it another go.
50

51
00:03:55,670 --> 00:03:55,970
All right.
51

52
00:03:55,970 --> 00:03:58,380
This is my third and final hint.
52

53
00:03:59,750 --> 00:04:07,560
And this hint relates to having a little bit of separation between the button and these inputs.
53

54
00:04:07,560 --> 00:04:14,180
Some of you guys might have applied the bootstrap to your form but you're not getting this exact appearance.
54

55
00:04:14,250 --> 00:04:23,790
Instead your button is stuck right next to that text area. And the hint for solving this problem is if
55

56
00:04:23,790 --> 00:04:33,210
you look at the bootstrap documentation and just check to see what this div form group actually includes
56

57
00:04:33,210 --> 00:04:38,260
And what does it not include. What's inside it and what's not inside it.
57

58
00:04:38,490 --> 00:04:41,840
And that will be the answer to help you solve this problem.