One of the first projects I was building was a very simple BMI Calculator. In the next lines, I will describe how I was thinking about this small app and also all the features, functions, and methods I used. Keep reading.

The final app – what I wanted to create?

The idea was pretty simple. I decided to create my own simple BMI Calculator. For BMI Calculator is important to have 2 basic inputs: weight and height. I chose to create a form in HTML with 2 additional inputs except for height and weight: gender and age. For the purposes of calculation, it was not that important but I was thinking that it could be great to collect the data to differentiate between genders and within different age groups so if there would be a lot of people filling in the info it could be interesting for further analysis. One of the inputs that could be also interesting is zip code or city/country.

Does it have any business potential?

In my opinion, the BMI topic could be something interesting for fitness coaches, centers, or businesses dealing with healthy lifestyles, healthy nutrition, etc. Talking about some business cases I think that in general BMI calculator could be kind of a good source of possible leads for the aforementioned types of businesses. Maybe there is also another business case for this topic but the detailed business view on this topic is out of the scope of this article.

I would like to mention one more important fact that according to Ubersuggest, there are 2.24m monthly searches of this term. See the picture below.

Data for keyword: BMI calculator, source: Ubbersuggest

With this amount of searches, it seems that the keyword is popular. However, there is a kind of higher SEO difficulty and so it could be harder to rank higher to get organic traffic. But still, as for the already mentioned lead generation, it could be a nice tool that gives the visitors some value and if they are interested they could find out more for example within personal consultation, etc.

But as mentioned in this particular article let’s dive more into the technical side of the calculator.

How I started this project + list of functions for my BMI calculator

I would like to introduce a couple of functions that I implemented within the app. I can say that I used just one type of event – click. So most of the functions are executed with the click of a particular button. For this I used EventTarget.addEventListener() method. I will come back to this later below. Let’s go through all the functionalities. Here it is:

BMI calculator app
BMI calculator app

The form itself has 5 inputs and 2 buttons. For the inputs with the gender (man or woman), I used input type: radio with labels for each particular input. For the other inputs: age, height, and weight the type of the input was text. For the calculation of BMI were only height and weight inputs as required. (I used the attribute required within HTML code for validation so without those 2 values entered it is not possible to calculate the result. As you can see all the inputs and buttons are the same width. I set up the class = “inputstyle” for all of them within HTML.

By clicking on Calculate your BMI button:

  1. Calculate BMI using weight and height as an input
  2. Show the result of calculation and also short sentence with text representation of the result
  3. Save all the information from the form (gender, age, height, weight, bmi, weight status) into the log
  4. Assign an ID for each calculation
  5. Create an element also with the information entered and calculated

By clicking on the Reset and calculate again button:

  1. Clear the values in all the inputs
  2. Clear also the result of calculation and also short sentence with the text representation of the result

By clicking on the created element:

  1. Delete the element
  2. Delete the information that was written to the log

…after all of this I decided to add this for me kind of new feature

After building all of these functionalities I decided that I would like to add one more thing – a filter for all the calculations and elements that were created. I wanted to filter out the calculations according to weight status.

BMI calculator app
BMI calculator app

For the filter, I needed a list of options to choose from and a filter button. For the list of option I used <select> tag in HTML.

By clicking on the Filter button:

  1. Please make the elements with weight status that was chosen to stay and hide all others

What I have realized within this exercise

As I am a beginner it took me a couple of days to come up with some solid solution that somehow works. I have spent a lot of time on the filtering functionality – the first time I have decided to use .filter() functionality but after a couple of unsuccessful attempts with this function I created a function with for loop and if else statement that delivers what I was trying to do. I am not saying that filter() is not a powerful thing, but for my case here I was unable to use it properly. Maybe with some more experience, I will be able to understand it better and use it so everything will work properly.

Secondly, I would like to mention that it is always good to realize what is the source of the data I use in the calculations and also the data type. This could help to lower the number of bugs and necessary tweaks.

The End and 2 more features I would add

Thank you for reading this article where I shared my approach to coding the BMI calculator. I am still at the beginning of coding and also writing the articles about it so I am looking for the best way how to share it with you. For now, I attach all the reference links to the methods I used (hope I have not forgotten any) within my code and also my GitHub repository, where you can find my code for this calculator available.

What I would add is definitely the responsivity of the app and visualization of the gathered data – for the visualization of the data I think I would need to store the data on the server. But that is the future of my learning journey.

You can also follow me on LinkedIn, Instagram or shoot me an email at hello@malocheck.com

If you find any mistakes or you think I should change/add something let me know at hello@malocheck.com.

Thank you and see you at my next article.

Reference links

HTML

class in HTML

select

CSS

flexbox

JAVASCRIPT

addEventListener()

filter()

bind()

if else statement

for loop

function

console.log()

Array.prototype.push()

You can find the code for this project in GitHub repository

BMI calculator repository

Follow me on socials or write me an email or message on Linkedin

Photo by Ben Kolde on Unsplash