Skip to content

📋 App to calculate the users Body Mass Index (BMI) using inputs of height and weight. Created using the Ionic 5 framework with React]. Initially Academind: Youtube video: Ionic + React - Tutorial for Beginners 2020 code but with customisations to code and styling.

License

Notifications You must be signed in to change notification settings

AndrewJBateman/ionic-react-scratchpad

Repository files navigation

⚡ Ionic React Scratchpad

📄 Table of contents

📚 General info

  • App created using Ionic CLI v5

📷 Screenshots

screen print

📶 Technologies

💾 Setup

  • Load dependencies using npm i,
  • To start the server on localhost://8100 type: 'ionic serve'

💻 Code Examples

  • function to calculate BMI from user inputs for height & weight
const calculateBMI = () => {
  const enteredWeight = weightInputRef.current!.value;
  const enteredHeight = heightInputRef.current!.value;

  if (
    !enteredHeight ||
    !enteredWeight ||
    +enteredHeight <= 0 ||
    +enteredWeight <= 0
  ) {
    setError("Please enter a valid number");
    return;
  }

  const weightConversionFactor = calcUnits === 'ftlbs' ? 2.20 : 1;
  const heightConversionFactor = calcUnits === 'ftlbs' ? 3.28 : 1;

  const weight = +enteredWeight / weightConversionFactor;
  const height = +enteredHeight / heightConversionFactor;

  setCalculatedBmi(weight / (height * height));
};

🆒 Features

  • ion cards are responsive so app looks good on PC or mobile screen

📋 Status & To-do list

  • Status: working. Updated april 2021. Minor error: result card does not disappear when reset button is pressed
  • To-do: Fix reset and add functionality

👏 Inspiration

📁 License

  • This project is licensed under the terms of the MIT license.

✉️ Contact

About

📋 App to calculate the users Body Mass Index (BMI) using inputs of height and weight. Created using the Ionic 5 framework with React]. Initially Academind: Youtube video: Ionic + React - Tutorial for Beginners 2020 code but with customisations to code and styling.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published