WEBVTT 00:03.290 --> 00:08.150 So we have a start on our product page and let's make that a little bit better, first of all, we need 00:08.150 --> 00:10.700 to add a form, but there's one other thing I'd like to do as well. 00:10.710 --> 00:16.850 So if I go back to my Web browser right now, we have this page by one widget and we also have our virtual 00:16.850 --> 00:17.280 terminal. 00:17.350 --> 00:20.540 Let's make a menu at the top, some kind of navigation thing. 00:20.870 --> 00:24.410 And I think the easiest way to do that is to take advantage of bootstraps. 00:24.410 --> 00:26.240 And I'm on get bootstrap dotcom. 00:26.240 --> 00:30.320 And I clicked on docs to scroll down to the number. 00:30.350 --> 00:32.990 I think that would be a really easy way to do it. 00:33.200 --> 00:39.110 So what I'm going to do is just copy this, the starter code, so I'll copy that and I'll go back to 00:39.110 --> 00:42.500 my idea and open up base layer. 00:43.520 --> 00:49.220 And right after the opening body tag, I'll give myself a few blank lines and I'll just paste in that 00:49.220 --> 00:51.780 starter code and we'll modify it as necessary. 00:52.580 --> 00:54.620 So there's a lot of stuff in here that I don't need. 00:54.650 --> 00:58.240 I do want to dropdown and I do want a home page. 00:58.250 --> 00:59.350 So let's get started here. 00:59.360 --> 01:00.250 I'll get rid of this. 01:00.260 --> 01:03.260 I'll just make the map or at the very top, that little bit of text. 01:03.260 --> 01:05.000 I'll just make that a non breaking space. 01:05.220 --> 01:06.790 We can change it later if we want to. 01:08.870 --> 01:13.190 And then down here, we'll leave the home page the way that it is. 01:13.320 --> 01:15.460 We'll make a link to a page that doesn't exist yet. 01:15.470 --> 01:17.090 Just slash the home page. 01:17.180 --> 01:28.840 OK, then I'll make the second one virtual terminal and we'll make that link to the virtual terminal. 01:30.650 --> 01:32.090 Then I'll use a dropdown here. 01:32.300 --> 01:34.430 OK, I'll just call this product's. 01:37.200 --> 01:39.450 And we'll give it to items. 01:41.940 --> 01:45.000 And we'll call the first one by 01:47.820 --> 01:51.330 one with a phone call the second one. 01:52.570 --> 01:53.320 Subscription. 01:55.070 --> 02:02.450 OK, and this one by one widget willing to this page, the one we're working on right now over here, 02:02.450 --> 02:09.920 which is called Charge once S.A.G., OSCE, and the second one will leave alone for right now because 02:09.920 --> 02:11.480 we're going to build that a little bit later on. 02:11.480 --> 02:13.880 And I'll get rid of this extra link because we don't need that. 02:16.040 --> 02:18.790 And I'll get rid of this form as well, because we don't need that. 02:19.580 --> 02:22.520 We might put it back later, but for now, that is sufficient. 02:23.150 --> 02:29.870 OK, let me have this all over so it's properly formatted and save that, see if it recompile. 02:32.690 --> 02:33.820 Looks like it did OK. 02:34.780 --> 02:35.780 We'll find out in a moment. 02:35.860 --> 02:39.390 Let's reload the page that looks like it didn't. 02:39.430 --> 02:42.160 So we'll stop this and run Aragón. 02:43.780 --> 02:44.360 There it is. 02:44.410 --> 02:46.410 Let's reload that page and see what it looks like. 02:48.810 --> 02:53.970 So we have our home virtual terminal and products, and this will take us to buy one widget and this 02:53.970 --> 02:56.110 should take us back to here. 02:56.820 --> 03:01.150 So products buy one widget and a virtual terminal takes us there. 03:01.170 --> 03:01.620 Perfect. 03:02.020 --> 03:05.130 OK, so let's get back on this page right here. 03:05.130 --> 03:05.860 Buy one widget. 03:06.330 --> 03:10.440 Well, obviously, it's going to have a form and the form will be remarkably similar to the one that 03:10.440 --> 03:11.750 we worked on last time. 03:11.760 --> 03:13.190 So let's use that as a starting point. 03:13.200 --> 03:17.240 So I'll hide my terminal and I'll open up the buy once page. 03:18.810 --> 03:24.780 Now open up the terminal page there is and we'll leave the JavaScript alone for right now. 03:24.780 --> 03:27.520 Let's just copy this form as a starting place. 03:28.710 --> 03:30.600 Copy that and we'll on the alert too. 03:31.890 --> 03:38.460 So we'll copy that and we'll go back to the buy once page and I'll put that right here and see how that 03:38.460 --> 03:40.770 looks and reload this. 03:42.390 --> 03:47.580 And there so we don't have our stripe JavaScript hooked up yet, but we have a good start now, there's 03:47.580 --> 03:49.460 a couple of other fields we're going to want as well. 03:49.470 --> 03:53.730 It's great that someone can buy this, but they shouldn't be able to choose their own price. 03:53.760 --> 03:55.040 So I don't have to go away. 03:55.410 --> 03:58.380 And we also need to have a little bit more information to ship to them. 03:58.620 --> 04:00.240 And we might take care of that and we might not. 04:00.250 --> 04:03.780 We're just trying to show how to buy something that has a fixed price. 04:04.470 --> 04:05.610 But this is a good start. 04:05.640 --> 04:11.790 So when the next lecture will take that JavaScript, which is currently embedded right in the virtual 04:11.790 --> 04:15.780 terminal page, I will make that a partial so we can reuse it anywhere we want to. 04:15.810 --> 04:18.000 And we'll get started on that in the next lecture.