All language subtitles for 012 Solution to the BMI Routing Challenge_en

All right.

So how did that challenge go?

I hope you really gave it a go, because there's a lot of new things that we've learned in the past few

lessons, and it's really good to just try it out yourself and make sure that you can get it working.

So the first thing that I asked you to do was to create a new file inside our calculator directory,

and that was going to be called bmiCalculator.html.

And so now we have a new page that is going to be the HTML code for our BMI Calculator page.

So I'm going to add in the HTML boilerplate, and I'm going to call it BMI Calculator, instead of just simply

Calculator. And then we're going to add our form that is going to not have a class, but it will have an

action that is going to relate to the route that we want to process this form, on and that route

we asked you to call it bmicalculator.

The method is again going to be post, because we're sending information to this route, rather than getting

information from it.

And then we're going to have again two inputs.

The first input is going to be the weight, and it's not going to have a value,

but we do need a placeholder so that we can tell the user that they should put the weight into this

input, and then the second input is going to have a name of height,

and again it needs a placeholder of height.

And finally let's just add a button, and make sure that you change the type to submit, because this is

going to trigger the post request of the form.

If it's just a button, it's not going to do that.

And then let's delete the name attribute and give our button some text.

Let's call it ‘Calculate BMI’.

And finally I'm just going to add an h1

that’s says BMI Calculator,

so we know which page we landed on.

So this is all we need to do inside our bmiCalculator.html,

and we now have to head into our calculator.js, our server code, in order to map out

those routes.

So below our get and post for our home route,

I'm going to add some new routes.

And the first thing I need is to specify a get. What happens when the user goes to the BMI Calculator

page?

Well, in this case we're going to have a callback that is going to send them a file.

So I'm going to use res.sendFile, and the file I want to send is going to be

__dirname,

so the directory name,

and then it's going to be

/bmiCalculator.html.

So let's spin up our server by saying nodemon calculator.js,

and once it's started and we've got ‘Server is running on port 3000.’, then let's head over to port

3000, and more specifically we're going to try and make a get request by accessing our page at bmiCalculator.

And we’ve got BMI Calculator.

So here we've got our two inputs showing up and our Calculate BMI button.

So at this point, if we put in a weight and put in a height, then nothing happens, because we haven't specified

what should happen when somebody tries to make a post request to this route.

So let's do that now. Let’s say app.post, targeting the /bmiCalculator route, then we're

going to have a call back with a request and a response, and then we're going to create a new variable

called weight, which is going to be set to the request.body.weight,

and remember that weight parameter name comes from the name attribute here in the input.

So we're going to store the value of this input inside this variable called weight, and we need to convert

it into a number, but not just any number.

We want it to be a decimal number.

So instead of simply just saying number(), we're going to use the parseFloat that we used before

when we created our BMI calculator.

So now I can do the same thing with height.

I can parseFloat, and the string I want to parse is the request.body.height parameter.

And now I can calculate my BMI by creating a new variable called bmi, and it's going to be set to equal

to weight divided by height times height, or you can use Math.pow, or just transplant the code that

you had when you completed the BMI calculator challenge.

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

that says, “Your BMI is “, and then I'm going to append this bmi variable we've got here.

So now our server has a way of responding to get requests that go to the bmiCalculator route, and it's

got a way of responding to post requests on the bami? bmiCalculator route.

And now if I hit save, then Nodemon is going to restart my server, and I can reload this page, put in my

weight and my height, and press Calculate BMI.

Then I get, “Your BMI is 19.444” something.

So I really hope you gave this a go,

and if you had any bugs or any issues, then after having watched this, it's a good idea to give it another

go and see if you can fix any bugs that you see. Now in the next module,

we’re going to be learning all about APIs and how to build a newsletter web site that we're going to

deploy live onto the web, where you can collect people's emails and save it into MailChimp, so that you

can start getting a newsletter list going. So for all of that and more,

I'll see you on the next module.