Back

BMI Calculator

A simple responsive BMI calculator, along with a generic landing page to explain what BMI means, what the results entail and the limitations of the system.

vuetailwindcssastro

Links

Media

Mobile

Mobile

Tablet

Tablet

Desktop

Desktop

The challenge

Users should be able to:

  • Select whether they want to use metric or imperial units
  • Enter their height and weight
  • See their BMI result, with their weight classification and healthy weight range
  • View the optimal layout for the interface depending on their device’s screen size
  • See hover and focus states for all interactive elements on the page

My process

At first, because of the weird positioning of the background and the calculator, I was going to use absolute positioning on the calculator section. But it got too cumbersome and annoying to manage for each screen size, I ended up making the background absolute instead of the calculator, and it turned out better than I thought.

The last section looked pretty intimidating. Using a grid with 12 columns may not be the optimal answer, but it worked out perfectly.

Built with

Continued development

I planned to try i18n with Astro, but there was a lot of text content, that I’m too lazy to translate to try that. I’ll try it on the next project if the text content is not too much.

Author