WEBVTT 0 00:00.420 --> 00:00.720 All right. 1 00:00.720 --> 00:02.680 So how did that challenge go? 2 00:02.790 --> 00:06.930 I hope you really gave it a go, because there's a lot of new things that we've learned in the past few 3 00:06.930 --> 00:12.860 lessons, and it's really good to just try it out yourself and make sure that you can get it working. 4 00:13.230 --> 00:20.950 So the first thing that I asked you to do was to create a new file inside our calculator directory, 5 00:21.090 --> 00:27.350 and that was going to be called bmiCalculator.html. 6 00:27.780 --> 00:35.170 And so now we have a new page that is going to be the HTML code for our BMI Calculator page. 7 00:35.250 --> 00:42.540 So I'm going to add in the HTML boilerplate, and I'm going to call it BMI Calculator, instead of just simply 8 00:42.570 --> 00:49.440 Calculator. And then we're going to add our form that is going to not have a class, but it will have an 9 00:49.530 --> 00:56.920 action that is going to relate to the route that we want to process this form, on and that route 10 00:56.970 --> 01:00.290 we asked you to call it bmicalculator. 11 01:00.540 --> 01:06.450 The method is again going to be post, because we're sending information to this route, rather than getting 12 01:06.450 --> 01:07.660 information from it. 13 01:07.890 --> 01:10.290 And then we're going to have again two inputs. 14 01:10.380 --> 01:14.810 The first input is going to be the weight, and it's not going to have a value, 15 01:14.910 --> 01:21.060 but we do need a placeholder so that we can tell the user that they should put the weight into this 16 01:21.060 --> 01:25.870 input, and then the second input is going to have a name of height, 17 01:25.980 --> 01:29.600 and again it needs a placeholder of height. 18 01:29.940 --> 01:36.960 And finally let's just add a button, and make sure that you change the type to submit, because this is 19 01:36.960 --> 01:39.870 going to trigger the post request of the form. 20 01:39.870 --> 01:42.250 If it's just a button, it's not going to do that. 21 01:42.570 --> 01:46.570 And then let's delete the name attribute and give our button some text. 22 01:46.590 --> 01:49.490 Let's call it ‘Calculate BMI’. 23 01:49.770 --> 01:52.290 And finally I'm just going to add an h1 24 01:52.320 --> 01:54.440 that’s says BMI Calculator, 25 01:54.510 --> 01:57.830 so we know which page we landed on. 26 01:58.120 --> 02:01.820 So this is all we need to do inside our bmiCalculator.html, 27 02:01.830 --> 02:08.110 and we now have to head into our calculator.js, our server code, in order to map out 28 02:08.170 --> 02:09.520 those routes. 29 02:09.760 --> 02:13.440 So below our get and post for our home route, 30 02:13.570 --> 02:15.790 I'm going to add some new routes. 31 02:15.790 --> 02:23.410 And the first thing I need is to specify a get. What happens when the user goes to the BMI Calculator 32 02:23.770 --> 02:24.570 page? 33 02:24.790 --> 02:31.400 Well, in this case we're going to have a callback that is going to send them a file. 34 02:31.480 --> 02:39.840 So I'm going to use res.sendFile, and the file I want to send is going to be 35 02:39.890 --> 02:40.640 __dirname, 36 02:40.780 --> 02:42.300 so the directory name, 37 02:42.460 --> 02:48.070 and then it's going to be 38 02:50.360 --> 02:51.690 /bmiCalculator.html. 39 02:51.950 --> 02:56.760 So let's spin up our server by saying nodemon calculator.js, 40 02:57.320 --> 03:03.110 and once it's started and we've got ‘Server is running on port 3000.’, then let's head over to port 41 03:03.200 --> 03:12.800 3000, and more specifically we're going to try and make a get request by accessing our page at bmiCalculator. 42 03:13.660 --> 03:15.760 And we’ve got BMI Calculator. 43 03:15.770 --> 03:21.980 So here we've got our two inputs showing up and our Calculate BMI button. 44 03:21.980 --> 03:29.390 So at this point, if we put in a weight and put in a height, then nothing happens, because we haven't specified 45 03:29.870 --> 03:36.600 what should happen when somebody tries to make a post request to this route. 46 03:36.890 --> 03:44.510 So let's do that now. Let’s say app.post, targeting the /bmiCalculator route, then we're 47 03:44.510 --> 03:51.380 going to have a call back with a request and a response, and then we're going to create a new variable 48 03:51.380 --> 03:59.360 called weight, which is going to be set to the request.body.weight, 49 03:59.660 --> 04:05.920 and remember that weight parameter name comes from the name attribute here in the input. 50 04:05.960 --> 04:13.040 So we're going to store the value of this input inside this variable called weight, and we need to convert 51 04:13.040 --> 04:16.160 it into a number, but not just any number. 52 04:16.160 --> 04:18.870 We want it to be a decimal number. 53 04:19.070 --> 04:27.740 So instead of simply just saying number(), we're going to use the parseFloat that we used before 54 04:27.740 --> 04:30.080 when we created our BMI calculator. 55 04:30.380 --> 04:32.950 So now I can do the same thing with height. 56 04:32.990 --> 04:40.860 I can parseFloat, and the string I want to parse is the request.body.height parameter. 57 04:41.420 --> 04:49.460 And now I can calculate my BMI by creating a new variable called bmi, and it's going to be set to equal 58 04:49.460 --> 04:59.450 to weight divided by height times height, or you can use Math.pow, or just transplant the code that 59 04:59.450 --> 05:03.650 you had when you completed the BMI calculator challenge. 60 05:03.650 --> 05:12.080 Now the final thing I need to do is I need to send back a response, and I'm going to send back the text 61 05:12.080 --> 05:20.490 that says, “Your BMI is “, and then I'm going to append this bmi variable we've got here. 62 05:20.510 --> 05:28.640 So now our server has a way of responding to get requests that go to the bmiCalculator route, and it's 63 05:28.640 --> 05:37.020 got a way of responding to post requests on the bami? bmiCalculator route. 64 05:37.160 --> 05:44.780 And now if I hit save, then Nodemon is going to restart my server, and I can reload this page, put in my 65 05:44.780 --> 05:49.990 weight and my height, and press Calculate BMI. 66 05:50.240 --> 05:55.330 Then I get, “Your BMI is 19.444” something. 67 05:55.700 --> 05:57.710 So I really hope you gave this a go, 68 05:57.770 --> 06:04.130 and if you had any bugs or any issues, then after having watched this, it's a good idea to give it another 69 06:04.130 --> 06:09.490 go and see if you can fix any bugs that you see. Now in the next module, 70 06:09.500 --> 06:15.140 we’re going to be learning all about APIs and how to build a newsletter web site that we're going to 71 06:15.140 --> 06:22.190 deploy live onto the web, where you can collect people's emails and save it into MailChimp, so that you 72 06:22.190 --> 06:27.620 can start getting a newsletter list going. So for all of that and more, 73 06:27.620 --> 06:28.730 I'll see you on the next module.