WEBVTT 0 00:00.210 --> 00:03.220 All right it's time for the next challenge. 1 00:03.300 --> 00:08.640 The goal of this challenge is to transform our compose page. 2 00:08.640 --> 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 00:17.160 --> 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 00:24.390 --> 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 00:31.130 --> 00:34.300 this challenge looks something like this. 6 00:34.380 --> 00:39.350 You'll notice that we've got bootstrap enabled on both of these inputs 7 00:39.360 --> 00:39.660 right? 8 00:39.660 --> 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 00:47.000 --> 00:53.820 HTML. And you also need to make this publish button blue and look like this. 10 00:53.820 --> 00:56.470 We've got some extra labels in hand. 11 00:56.640 --> 01:01.780 We've got an extra text box that's put in using bog standard HTML 12 01:02.040 --> 01:05.810 and then we formatted this form using bootstrap. 13 01:05.880 --> 01:07.440 This is the end goal. 14 01:07.500 --> 01:13.900 Pause the video now and make your compose page look the same way as this. 15 01:14.140 --> 01:17.110 OK so here's my first hint for you. 16 01:17.590 --> 01:20.420 Over here we've got this extra text box. 17 01:20.530 --> 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 01:25.950 --> 01:27.200 instead of single line. 19 01:27.460 --> 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 01:32.980 --> 01:37.410 search with something like multi-line text box HTML form right? 21 01:37.750 --> 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 01:45.160 --> 01:45.560 right? 23 01:45.670 --> 01:48.590 I want to get a multi-line input. 24 01:48.640 --> 01:50.560 How do I do it? 25 01:50.620 --> 01:51.810 And the answer 26 01:52.000 --> 01:58.690 that had lots of votes and a checkmark is you need to use a textarea instead of an input. 27 01:58.720 --> 02:03.790 So let's go ahead and try and add this textarea to our code. 28 02:03.790 --> 02:06.430 So I'm just going to copy it over. 29 02:06.430 --> 02:14.140 Currently in our compose.ejs I've only got a input that's of type text and a submit button. 30 02:14.140 --> 02:19.380 So right before the submit is where I'm going to put in my text area. 31 02:19.690 --> 02:24.060 See if that's enough of a hint to get you unstuck on this challenge. 32 02:24.370 --> 02:25.500 Give it a go again. 33 02:27.140 --> 02:34.640 Now my second div relates to how to use bootstrap to get the layout that we wanted. 34 02:34.670 --> 02:40.310 So if we didn't know how to format our form using bootstrap then we might search for something like 35 02:42.130 --> 02:43.090 bootstrap form 36 02:43.100 --> 02:43.670 right? 37 02:44.000 --> 02:50.050 So then we might click on the first link, forms and you can see this is an outdated alpha release. 38 02:50.060 --> 02:53.000 Please visit latest bootstrap for stable release. 39 02:53.000 --> 02:59.920 So let's go over there and let's go ahead into that documentation and search for form. 40 03:00.410 --> 03:03.260 And you can see this is the docs for using forms. 41 03:03.320 --> 03:08.040 Now if we look at the first example here you can see that they've got a label. 42 03:08.240 --> 03:16.280 Then they have this input of type email and they've applied a class onto it called form control. 43 03:16.280 --> 03:22.910 And if you remember way back from all of our bootstrap days everything that we do through bootstrap is done 44 03:22.910 --> 03:26.780 by applying classes to individual HTML elements. 45 03:26.840 --> 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 03:34.490 --> 03:41.470 thing called form control in order for the inputs to be formatted in the way that we want it to. 47 03:41.480 --> 03:47.540 And finally they've got exactly the same button that we want and the classes are being applied onto 48 03:47.630 --> 03:49.340 the button as well. 49 03:49.340 --> 03:55.660 So see if this is enough of a hint to enable you to complete this challenge. Give it another go. 50 03:55.670 --> 03:55.970 All right. 51 03:55.970 --> 03:58.380 This is my third and final hint. 52 03:59.750 --> 04:07.560 And this hint relates to having a little bit of separation between the button and these inputs. 53 04:07.560 --> 04:14.180 Some of you guys might have applied the bootstrap to your form but you're not getting this exact appearance. 54 04:14.250 --> 04:23.790 Instead your button is stuck right next to that text area. And the hint for solving this problem is if 55 04:23.790 --> 04:33.210 you look at the bootstrap documentation and just check to see what this div form group actually includes 56 04:33.210 --> 04:38.260 And what does it not include. What's inside it and what's not inside it. 57 04:38.490 --> 04:41.840 And that will be the answer to help you solve this problem.