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 code right in the browser using Pages. For simple projects that only use 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 Abstra Cloud to access your workspace. Once I’ve logged in, I can create a new Page called “BMI Calculator”. I’ll access the online editor by creating a new blank Page, where I can already preview a running example.

Now let’s modify that code to implement our calculator. As BMI is evaluated with a person’s weight and height, we need to request our user to fill in this data. Abstra Cloud’s “hackerforms” library provides many 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 preview how the Page is working so far. While still building my script, 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. Abstra Cloud also provides many display functions. I’d like to display a text, so I will use the simplest display option:

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

Everything’s working and we’re ready to deploy! That’s the easiest step of all. I just hit the “Share page” button and a shareable link is generated. Now anyone can access my form 🎉

‍

Taking it pro

Now 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.

The lib 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. I’ll also customize the default text on the submit button to “Evaluate”.

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 we can see in the logs, the Page returns a <Dict> with the keys configured on each field.

Now I’ll modify the next page where the BMI results are displayed. I’d like to display a conditional text depending on the BMI range and add my ebook link for all cases. For this, I’ll use an <if> clause to define my <bmiText> variable and a <display_link> widget.

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", link_text = "Check out my ebook!") \
  .run()

‍

To update the same link previously generated URL with my changes, I just hit the “Publish” button. Here’s my final version, as my user will see it:

‍