So, I know this has been done time and time again in endless forms and languages, but I wanted to add one more in. I have been working with the Unity game engine and C# nonstop lately which has been an amazing experience that has grown my developer skills exponentially. I do, however, like to keep my knowledge fresh. So, I went back to Node.js to keep my backend programming skills fresh in my head.
With this simple project I started with opening up git bash and creating a directory on my Desktop named ‘BMIcalculator’. Inside that directory I created a bmiCalculator.html to put my client side html, and a calculator.js file to put my server side code.
In the html file I put a simple form with two inputs of ‘weight’ and ‘height’, and a submit button to calculate the BMI. I am making this with imperial measurements so, as you will see in the calculator.js file, I needed to input the formula as such. Here is the html:
After I create this, I initialize NPM in my directory so I can access express and body-parser for this project. Express is how I am able to set up a server, in this case I am setting up a localhost:3000 to run locally. Body-parser parses the JSON, buffer, string and URL encoded data submitted using HTTP POST request from the form on the bmiCalculator.html file. So, first thing first, we have to require both of these modules and set them up to be used in our calculator.js file:
In order to run our app on the local server, express has to bind and listen the connections on the specified host and port:
To be able to render the html file on the browser we have to use app.get() so express can match the request to the /bmicalculator route we set in the action attribute of our html form. After the request, we use res.sendFile() to have the correct directory called so it can render on the browser:
Now to handle the post that was requested when we hit the Calculate BMI button we use app.post() passing in the /bmicalculator as our request and for our call back response the calculations. To render the results on the browser we use res.send(). This is where body-parser comes in. We set variables for the weight and height, and one for the bmi calculation. I used parseFloat() to return a floating point number, otherwise it will read it as a string and the calculation wont work properly.
So, there you have it, a simple BMI calculator app that can be made fairly quickly. This works well for any kind of calculations. I made a standard calculator and also a tip calculator on this same app as well.