React.js Hooks BMI (Body Mass Index) Calculator Using Chart.js Library and Height and Weight Full Project For Beginners

React.js Hooks BMI (Body Mass Index) Calculator Using Chart.js Library and Height and Weight Full Project For Beginners

 

Welcome folks today in this blog post we will be building a bmi calculator using weight and height in react.js hooks. All the full source code of the application is shown below.

 

 

Get Started

 

First of all install the chart.js library by the following command

 

npm i chartjs

 

And now if you create an App.jsx file and copy paste the following code

 

App.jsx

 

 

import React, { useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
import 'materialize-css/dist/css/materialize.min.css';
import './App.css';
import BmiForm from '../BmiForm/BmiForm';
import Info from '../Info/Info';
import Bar from '../Bar/Bar';
import { getData, storeData } from '../../helpers/localStorage';

const App = () => {
  const initialState = () => getData('data') || [];
  const [state, setState] = useState(initialState);
  const [data, setData] = useState({});

  useEffect(() => {
    storeData('data', state);
    const date = state.map(obj => obj.date);
    const bmi = state.map(obj => obj.bmi);
    let newData = { date, bmi };
    setData(newData);
  }, [state]);

  const handleChange = val => {
    let heightInM = val.height / 100;
    val.bmi = (val.weight / (heightInM * heightInM)).toFixed(2);
    val.id = uuidv4();
    let newVal = [...state, val];
    let len = newVal.length;
    if (len > 7) newVal = newVal.slice(1, len);
    setState(newVal);
  };

  const handleDelete = id => {
    storeData('lastState', state);
    let newState = state.filter(i => {
      return i.id !== id;
    });
    setState(newState);
  };

  const handleUndo = () => {
    setState(getData('lastState'));
  };

  return (
    <div className='container'>
      <div className='row center'>
        <h1 className='white-text'> BMI Tracker </h1>
      </div>
      <div className='row'>
        <div className='col m12 s12'>
          <BmiForm change={handleChange} />
          <Bar labelData={data.date} bmiData={data.bmi} />
          <div>
            <div className='row center'>
              <h4 className='white-text'>7 Day Data</h4>
            </div>
            <div className='data-container row'>
              {state.length > 0 ? (
                <>
                  {state.map(info => (
                    <Info
                      key={info.id}
                      id={info.id}
                      weight={info.weight}
                      height={info.height}
                      date={info.date}
                      bmi={info.bmi}
                      deleteCard={handleDelete}
                    />
                  ))}
                </>
              ) : (
                  <div className='center white-text'>No log found</div>
                )}
            </div>
          </div>
          {getData('lastState') !== null ? (
            <div className='center'>
              <button className='calculate-btn' onClick={handleUndo}>
                Undo
              </button>
            </div>
          ) : (
              ''
            )}
        </div>
      </div>
    </div>
  );
};

export default App;

 

See also  Build a React Native Stopwatch Timer Clock Countdown Component Using react-native-stopwatch-timer Library in Javascript Full Project For Beginners

 

In order to get started you need to install the full source code of the application by the below link

 

DOWNLOAD SOURCE CODE

 

See also  React.js Building a Tic Tac Toe Computer AI Single or MultiPlayer Board Game Using react-tic-tac-toe Library in Javascript Full Project For Beginners

Now if you run the following react.js project you will see the following result

 

Leave a Reply