The BMI calculator is basically a tool that divides the weight by the square of height of an individual to measure its body mass so that it can indicate its weight category, although it is not a diagnose of body fatness.
This project is part os my pernonal portifolio, I'm a begginer program developer and I intend to study at Kwantlen Polytechnic University in Canada, so I'll be happy if you could provide me any feedback about the project, code structure or anything that you can report that could make me a better developer!
Email-me: viniciusgomesrs@hotmail.com
Connect with me at linkedin
You can also use this project as you wish!
-Visual Studio Code (VSCode) download VSCode
-Live Server extension in VSCode
-A browser of your choice (I used Opera GX) download Opera GX
The first step to create the BMI calculator was to open a new folder in Visual Studio Code to group all of the program’s files. It was then created a reference list file for all weight categories in JSON (JavaScript Object Notation) named as listing.js.
The second step was to create a interaction screen for the user, named index.html, therefore it had to be writen a HTML code to “draw” this screen.
This file contains coding that creates labels to type the gender, weight and height information, show the results value, the calulate button and a reference link to a css file. It also contains a script code to bring an external script file to it, wich in this case is the searchcategory.js file. The HTML file tells the searchCategory.JS to the the following operations:
- Recieve the iformation the user typed and verify if it is not empty;
- Convert it to allow the BMI calculus, if those are not empty;
- Calcutale it;
- Search the category the user fits in using the BMI value generated;
- Once the script has found the category it will show the results in HTML page.
Since it is a web page and it was not created a data server, an extension named LiveServer in VSCode had to be downloaded so that the web browser could interpret that the data is storaged in a server, that is essencial for a request to work.
Obs.: It always has to be opened with a live server to work.
Next step was to create the Javascript file named “searchCategory.js” to get the information from the JSON file “listing.js” and bring it to the calculator so that it can tell wich weight category the individual fits in.
JSON is a notation, in other words, it is the format of the data we are processing. This file is reponsable for validating the typed information and convert it when the user clicks the button “Calculate BMI” for the calculus to be done A command that starts “translating” JSON to a known format, an array in this case, is JSON.parse and it works like this:
JSON.parse(variable) The variable is the content in JASON format. In this case the code is inside the variable “answer”. To run trought the elements of a vector it is used a loop estructure called “for Each”: var categories = JSON.parse(answer);
categories.forEach(function(category) {
console.log(category);
});
The command will run throught the various categories in listing.js file and print the resulting vectors in console.
It had also to be added value conditions to match the information contained in listing.js using the “if... else” command followed by an error alert for the user to know the input value is not acceptable.
The searchCategory.js file now looks like this:
It was then created a css file, named as styles.css to add some style to the web page.
After creating all the four files (Listing.js, Index.html, searchCategory.js and styles.css) and opening the HTML file with a live server the calculator is finaly working!
