Frontend Mentor - Body Mass Index calculator solution

This is a solution to the Body Mass Index calculator challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
• Author

Overview

The challenge

Your challenge is to build out this body mass index calculator page and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your 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

Screenshot

Links

• Solution URL:
• Live Site URL: https://courageous-crumble-e79d4e.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• AJAX

Author

• Frontend Mentor - @beatrizang