रिएक्ट के साथ बीएमआई कैलकुलेटर बनाना

परिचय

बॉडी मास इंडेक्स (बीएमआई) यह निर्धारित करने के लिए व्यापक रूप से उपयोग किया जाने वाला मीट्रिक है कि किसी व्यक्ति का किसी दी गई ऊंचाई के लिए स्वस्थ शरीर का वजन है या नहीं। इस ब्लॉग में, हम रिएक्ट का उपयोग करके एक सरल लेकिन कार्यात्मक बीएमआई कैलकुलेटर के निर्माण के बारे में जानेंगे। यह प्रोजेक्ट उपयोगकर्ताओं को अपने बीएमआई की गणना करने के लिए अपना वजन और ऊंचाई इनपुट करने की अनुमति देता है और परिणाम के आधार पर वर्गीकरण प्रदान करता है।

परियोजना अवलोकन

बीएमआई कैलकुलेटर रिएक्ट के साथ निर्मित एक प्रतिक्रियाशील वेब एप्लिकेशन है। यह उपयोगकर्ता के वजन (किलोग्राम में) और ऊंचाई (सेंटीमीटर में) को इनपुट के रूप में लेता है और बीएमआई की गणना करता है। इसके बाद ऐप परिकलित बीएमआई के साथ संबंधित वजन वर्गीकरण जैसे कम वजन, सामान्य वजन, अधिक वजन या मोटापा प्रदर्शित करता है।

विशेषताएँ

• उपयोगकर्ता-अनुकूल इंटरफ़ेस: एक सरल और साफ़ यूआई जो नेविगेट करने में आसान है।
• वास्तविक समय गणना: उपयोगकर्ता अपना वजन और ऊंचाई दर्ज करके तुरंत अपने बीएमआई की गणना कर सकते हैं।
• उत्तरदायी डिज़ाइन: कैलकुलेटर उत्तरदायी है और विभिन्न स्क्रीन आकारों पर अच्छा काम करता है।
• वजन वर्गीकरण: गणना की गई बीएमआई के आधार पर, उपयोगकर्ताओं को उनके वजन की स्थिति के बारे में सूचित किया जाता है।

प्रयुक्त प्रौद्योगिकियाँ

• प्रतिक्रिया: उपयोगकर्ता इंटरफ़ेस के निर्माण के लिए मुख्य पुस्तकालय।
• जावास्क्रिप्ट: बीएमआई गणना के तर्क को संभालने के लिए।
• सीएसएस: एप्लिकेशन को स्टाइल करने और एक प्रतिक्रियाशील डिज़ाइन सुनिश्चित करने के लिए।

परियोजना संरचना

यहां परियोजना की संरचना का संक्षिप्त विवरण दिया गया है:

src/
│
├── assets/
│   └── images/
│       └── BMI Logo.png
├── components/
│   └── BmiCalculator.jsx
├── App.jsx
├── App.css
└── index.css

कोड स्पष्टीकरण

1. बीएमआईकैलकुलेटर घटक

यह घटक एप्लिकेशन का हृदय है। यह उपयोगकर्ता इनपुट को संभालता है, बीएमआई गणना करता है, और परिणाम प्रदर्शित करता है।

import { useState } from "react";
import logoImg from "../assets/images/BMI Logo.png";

const BmiCalculator = () => {
  const [weight, setWeight] = useState("");
  const [height, setHeight] = useState("");
  const [bmi, setBMI] = useState("");
  const [result, setResult] = useState("");

  function calculateBMI(weight, height) {
    const heightM = height / 100;
    const bmiResult = weight / (heightM * heightM);
    setBMI(bmiResult.toFixed(2)); // Round to 2 decimal places
    if (bmiResult  {
    if (weight && height) {
      calculateBMI(weight, height);
    }
  };

  return (
    

      

        
      
      

        

          
Weight (kg)
           setWeight(e.target.value)}
          />
        
        

          
Height (cm)
           setHeight(e.target.value)}
          />
        
      
      
        
Calculate BMI
      
      

        
Your BMI : {bmi}
        
Result : {result}
      
    
  );
};

export default BmiCalculator;

2. ऐप घटक

ऐप घटक मुख्य कंटेनर के रूप में कार्य करता है, Bmiकैलकुलेटर घटक को लपेटता है और एक शीर्षलेख और पादलेख जोड़ता है।

import BmiCalculator from "./components/BmiCalculator";
import "./App.css";

const App = () => {
  return (
    

      

        
BMI Calculator
      
      
      

        
Made with ❤️ by Abhishek Gurjar
      
    
  );
};

export default App;

3. ऐप को स्टाइल करना (App.css)

सीएसएस यह सुनिश्चित करता है कि ऐप देखने में आकर्षक और प्रतिक्रियाशील हो।

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #008f7d;
  color: white;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}

.header {
  text-align: center;
  font-size: 18px;
}

.bmi-container {
  margin: 40px;
  width: 500px;
  height: 430px;
  background-color: white;
  color: black;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.logo img {
  width: 50px;
  height: 50px;
  margin: 15px;
}

.input-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-box h4 {
  color: gray;
}

.weight-input,
.height-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.weight-input input,
.height-input input {
  height: 27px;
  width: 180px;
  font-weight: 400;
  font-size: 14px;
  border-radius: 7px;
}

.btn {
  margin: 15px;
  width: 65%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #087fff;
  color: white;
  border: 0.5px solid black;
  border-radius: 7px;
}

.btn:hover {
  background-color: #2570c1;
}

.output-box {
  margin-top: 20px;
  width: 65%;
  height: 15%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background-color: #e2e2e2;
  color: black;
  border-radius: 7px;
  border: 1px solid black;
}

.output-box p {
  margin-left: 20px;
  line-height: 0;
}

.footer {
  text-align: center;
  font-size: 14px;
}

स्थापना और उपयोग

अपनी स्थानीय मशीन पर बीएमआई कैलकुलेटर चलाने के लिए, इन चरणों का पालन करें:

1. रिपोजिटरी क्लोन करें:

   git clone https://github.com/abhishekgurjar-in/Bmi_Calculator.git

1. निर्भरताएं स्थापित करें: प्रोजेक्ट निर्देशिका पर जाएँ और चलाएँ:

   npm install

1. एप्लिकेशन प्रारंभ करें: चलाकर ऐप लॉन्च करें:

   npm start

एप्लिकेशन आपके डिफ़ॉल्ट वेब ब्राउज़र में http://localhost:3000 पर खुलना चाहिए।

लाइव डेमो

यहां बीएमआई कैलकुलेटर का लाइव डेमो देखें।

निष्कर्ष

इस प्रोजेक्ट में, हमने रिएक्ट का उपयोग करके एक सरल लेकिन प्रभावी बीएमआई कैलकुलेटर बनाया। यह प्रोजेक्ट उपयोगकर्ता के अनुकूल इंटरफ़ेस बनाने के लिए रिएक्ट स्थिति प्रबंधन, सशर्त प्रतिपादन और बुनियादी स्टाइल के उपयोग को प्रदर्शित करता है। चाहे आप अभी रिएक्ट के साथ शुरुआत कर रहे हों या अपने कौशल का अभ्यास करना चाह रहे हों, यह प्रोजेक्ट व्यावहारिक अनुभव प्राप्त करने का एक शानदार तरीका है।

क्रेडिट

• लोगो: इस प्रोजेक्ट में इस्तेमाल किया गया बीएमआई लोगो अनस्प्लैश से लिया गया है।
• प्रेरणा: यह परियोजना ऑनलाइन उपलब्ध विभिन्न बीएमआई कैलकुलेटर से प्रेरित थी।

लेखक

अभिषेक गुर्जर एक भावुक वेब डेवलपर हैं, जो सहज और उत्तरदायी वेब एप्लिकेशन बनाने पर ध्यान केंद्रित करते हैं। उनकी यात्रा का अनुसरण करें और GitHub पर और अधिक प्रोजेक्ट खोजें।