بناء حاسبة مؤشر كتلة الجسم باستخدام React

مقدمة

مؤشر كتلة الجسم (BMI) هو مقياس يستخدم على نطاق واسع لتحديد ما إذا كان الشخص يتمتع بوزن صحي لطول معين. في هذه المدونة، سنتعرف على كيفية إنشاء حاسبة مؤشر كتلة الجسم بسيطة ولكنها عملية باستخدام React. يتيح هذا المشروع للمستخدمين إدخال وزنهم وطولهم لحساب مؤشر كتلة الجسم الخاص بهم ويوفر تصنيفًا بناءً على النتيجة.

نظرة عامة على المشروع

حاسبة مؤشر كتلة الجسم هي تطبيق ويب سريع الاستجابة تم تصميمه باستخدام React. يأخذ وزن المستخدم (بالكيلوجرام) والطول (بالسنتيمتر) كمدخلات ويحسب مؤشر كتلة الجسم. يعرض التطبيق بعد ذلك مؤشر كتلة الجسم المحسوب بالإضافة إلى تصنيف الوزن المقابل مثل نقص الوزن أو الوزن الطبيعي أو الوزن الزائد أو السمنة.

سمات

• واجهة سهلة الاستخدام: واجهة مستخدم بسيطة ونظيفة يسهل التنقل فيها.
• الحساب في الوقت الفعلي: يمكن للمستخدمين حساب مؤشر كتلة الجسم الخاص بهم على الفور عن طريق إدخال وزنهم وطولهم.
• تصميم سريع الاستجابة: الآلة الحاسبة سريعة الاستجابة وتعمل بشكل جيد على أحجام الشاشات المختلفة.
• تصنيف الوزن: بناءً على مؤشر كتلة الجسم المحسوب، يتم إعلام المستخدمين بحالة وزنهم.

التقنيات المستخدمة

• React: المكتبة الأساسية لبناء واجهة المستخدم.
• جافا سكريبت: للتعامل مع منطق حساب مؤشر كتلة الجسم.
• CSS: لتصميم التطبيق وضمان تصميم سريع الاستجابة.

هيكل المشروع

هذه نبذة مختصرة عن هيكل المشروع:

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

شرح الكود

1. مكون BmiCalculator

هذا المكون هو قلب التطبيق. فهو يتعامل مع مدخلات المستخدم، ويقوم بحساب مؤشر كتلة الجسم، ويعرض النتيجة.

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. مكون التطبيق

يعمل مكون التطبيق كحاوية رئيسية، حيث يقوم بتغليف مكون BmiCalculator وإضافة رأس وتذييل.

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

const App = () => {
  return (
    

      

        
BMI Calculator
      
      

        
Made with ❤️ by Abhishek Gurjar
      
    
  );
};

export default App;

3. تصميم التطبيق (App.css)

يضمن 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.

العرض المباشر

اطلع على العرض التجريبي المباشر لحاسبة مؤشر كتلة الجسم هنا.

خاتمة

في هذا المشروع، قمنا ببناء حاسبة مؤشر كتلة الجسم بسيطة وفعالة باستخدام React. يوضح هذا المشروع استخدام إدارة حالة React والعرض الشرطي والتصميم الأساسي لإنشاء واجهة سهلة الاستخدام. سواء كنت بدأت للتو في استخدام React أو تتطلع إلى ممارسة مهاراتك، فإن هذا المشروع يعد طريقة رائعة للحصول على خبرة عملية.

الاعتمادات

• الشعار: شعار BMI المستخدم في هذا المشروع مأخوذ من Unsplash.
• الإلهام: هذا المشروع مستوحى من العديد من الآلات الحاسبة لمؤشر كتلة الجسم المتوفرة عبر الإنترنت.

مؤلف

أبهيشيك جورجار هو مطور ويب متحمس مع التركيز على بناء تطبيقات ويب بديهية وسريعة الاستجابة. تابع رحلته واستكشف المزيد من المشاريع على GitHub.