Tutorials
2022-06-08

Lightening fast BMI Calculator

In this tutorial, you will learn how to create and deploy a BMI calculator in 5 minutes, using only Python. That’s it... 5 minutes from nothing to a working application deployed.

To do so, we’ll use Hackerforms, coding right in the browser. In simple projects with only one Python file, the included online code editor may be more convenient.

Getting started

First, if you haven’t yet, sign up for free to access your workspace, where you can create your own Hackerforms. Once I’ve logged in, I can create a new form called “Hack BMI Calculator”.  I’ll access the online editor with a default example and the preview of the running form.

Now let’s modify that code to implement our calculator. As BMI is evaluated with the weight and height of the person, we need to request the user to fill in this data. The Hackerforms library provides a bunch of functions to read inputs. In our case, we want a number so let’s use <read_number>.

from hackerforms import *

weight = read_number('What is your weight (kg)?')
height = read_number('What is your height (m)?')

We can already see how the form is working so far. While still building the form, I can print the answers just to check if everything is working properly - the same way I would when coding locally. The prints will be displayed on the “logs” section.

Now that we have our inputs, we can evaluate the BMI:

from hackerforms import *

weight = read_number('What is your weight (kg)?')
height = read_number('What is your height (m)?')

bmi = weight / (height * height)

print(bmi)

We could display the BMI according to each range. Hackerforms also provide many display functions. I’d like to display a text, so I will use the simplest display:

from hackerforms import *

weight = read_number('What is your weight (kg)?')
height = read_number('What is your height (m)?')

bmi = weight / (height * height)

if bmi < 18.5:
  display("You are underweight.")
elif bmi < 25:
  display("Your weight is in a normal range.")
elif bmi < 30:
  display("You are a little over your ideal weight.")
elif bmi < 35:
  display("Your weight is much higher than the ideal one. That is considered obesity.")
else:
  display("Your weight is in the extreme obesity range.")

Sharing my form

It’s working and ready to be deployed. That’s the easiest step of all. I can hit the “share” button and a shareable link is generated. Now anyone can access my form 🎉

Taking it pro

I’d like to share this form on social media and lead potential clients to my workout program ebook. So let’s make some adjustments to improve the user experience.

Hackerforms also provides the <Page> class in order to allow multiple reads and displays on the same screen. I will use it to avoid unnecessary clicks between inputs.

from hackerforms import *

info = Page() \
  .display('Let\'s evaluate your BMI') \
  .read_number('What is your weight (kg)?', key = 'weight') \
  .read_number('What is your height (m)?', key = 'height') \
  .run('Evaluate')

print(info)

As you can see in the logs, the answer is a <Dict> with the keys configured on each field.

I also changed the text displayed on the submit button.

Now I’m going to modify the next page where I display the BMI result. I want to add a link to my ebook.

from hackerforms import *

info = Page() \
  .display('Let\'s evaluate your BMI') \
  .read_number('What is your weight (kg)?', key = 'weight') \
  .read_number('What is your height (m)?', key = 'height') \
  .run('Evaluate')

bmi = info['weight'] / (info['height'] * info['height'])

bmiText = ""

if bmi < 18.5:
  bmiText = "You are underweight. Do you want to gain muscle mass?"
elif bmi < 25:
  bmiText = "Your weight is in a normal range. Do you want to improve your body composition?"
elif bmi < 30:
  bmiText = "You are slightly above your ideal weight. Do you want to cut some fat?"
elif bmi < 35:
  bmiText = "Your weight is much higher than ideal. That is considered obesity. Do you wanna change your body?"
else:
  bmiText = "Your weight is in the extreme obesity range. Let's change it?"

Page() \
  .display(bmiText) \
  .display_link("https://my-ebook.com/download", "Check out my ebook!") \
  .run()

I’m displaying a conditional text depending on the BMI range and for all cases, I want to display my ebook link.

Here’s my final version, instantly updated on the same link previously generated.