⚡ Ionic React Scratchpad

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

📄 Table of contents

• ⚡ Ionic React Scratchpad
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• App created using Ionic CLI v5

📷 Screenshots

📶 Technologies

• Ionic v5 framework
• React v17 library

💾 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

• Academind: Youtube video: Ionic + React - Tutorial for Beginners 2020

📁 License

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

✉️ Contact

• Repo created by ABateman, email: [email protected]