توسعه مینی پروژه BMI (شاخص توده بدنی) با جاوااسکریپت + لینک دانلود سورس کد

می‌خوام درباره یه مینی پروژه جذاب صحبت کنم که هم کاربردیه و هم می‌تونه یه تمرین خوب برای یادگیری جاوااسکریپت باشه. این پروژه ساده اما مفید، چیزی نیست جز “محاسبه‌گر BMI”. BMI یا همون شاخص توده بدنی، معیاریه که باهاش می‌تونیم بفهمیم وزنمون نسبت به قدمون تو چه وضعیتی قرار داره؛ آیا تو محدوده نرمالیم یا نیاز داریم یه تغییراتی تو سبک زندگیمون بدیم.

تو این مقاله، قدم به قدم می‌ریم جلو و با استفاده از جاوااسکریپت یه اپلیکیشن کوچیک می‌سازیم که BMI رو محاسبه می‌کنه. این پروژه نه‌تنها کمک می‌کنه تا بهتر کد نویسی یاد بگیریم، بلکه به کاربرایی که ازش استفاده می‌کنن هم می‌تونه کمک کنه تا بیشتر حواسشون به سلامتشون باشه. پس بیایید دست به کار بشیم!

در ابتدا پیکر بندی فایل های پروژه رو انجام میدیم که سورس کد html و css این پروژه داخل فایل دانلود هست و از قبل توسعه داده شده و ما در واقع توی این مقاله میخوایم بخش منطق یا دراصل جاوا اسکریپت پروژه رو باهم دیگه توسعه بدیم.

گرفتن المان های مورد نیاز از DOM

در ابتدا تمامی عناصری که در سند html خودمون ساختیم رو با استفاده از سلکتور ها انتخاب میکنیم و اونارو توی متغییر هاشون ذخیره میکنیم :

				
					const weightInput = document.getElementById('weight-input');
const heightInput = document.getElementById('height-input');
const calculateBtn = document.getElementById('calculate-btn');
const resultDiv = document.getElementById('result');
const bmiValue = document.getElementById('bmi-value');
const bmiStatus = document.getElementById('bmi-status');

نوشتن تابع برای محاسبه BMI

حالا نوبت به مهم ترین بخش پروژه میرسه ؛ یعنی نوشتن تابعی که با آن شاخص توده بدنی رو حساب کنیم. در ابتدا دو متغیر برای ذخیره سازی وزن و قد کاربر تعریف میکنیم و مقدار قد رو تقسیم بر ۱۰۰ میکنیم تا به سانتی متر تبدیل بشه ؛ حالا یه شرط تعریف میکنیم که اگر مقادیر عددی نبودن یا مقدار وزن برابر با صفر بود یک پیغام خطا به کاربر نشون بده و در نهایت مقادیر به دست اومده رو توی متغیری به نام bmi ذخیره میکنیم ؛ و اما محاسباتی که روی اون انجام میدیم چیه ؟

				
					const weight = parseFloat(weightInput.value);
    const height = parseFloat(heightInput.value) / 100;

    if (isNaN(weight) || isNaN(height) || height === 0) {
        alert('لطفاً وزن و قد معتبر وارد کنید');
        return;
    }

برای بدست آوردن شاخص توده بدنی لازمه که وزن تقسیم بر قد به توان دو بشه :

				
					const bmi = weight / (height * height);

و تابع ما به این شکل ساخته میشه اما کار ما هنوز باهاش تموم نشده :

				
					function calculateBMI() {
    const weight = parseFloat(weightInput.value);
    const height = parseFloat(heightInput.value) / 100;

    if (isNaN(weight) || isNaN(height) || height === 0) {
        alert('لطفاً وزن و قد معتبر وارد کنید');
        return;
    }

    const bmi = weight / (height * height);
}

نوشتن تابع برای نمایش BMI

حالا نوبت به نمایش این مقدار توی DOM میرسه ؛ اول از همه یه تابع براش مینویسیم و به عنوان پارامتر مقدار bmi رو از تابع محاسبه میگیریم. و اما توی خط اول باید مقادیر نمایش رو درست کنیم ؛‌ مقدار bmiValue که برای نمایش شاخص توده بدنیه رو فراخوانی میکنیم و با استفاده از متد textContent مقدار اون رو با bmi بدست اومده داینامیک و پویا میکنیم. اما مقدار بدست اومده ممکنه کلی اعشار پشت سرش باشه ؛ پس از متد toFixed(2) برای bmi استفاده میکنیم تا اعداد اعشارش رو تا دو رقم کوتاه کنیم :

				
					    bmiValue.textContent = `شاخص توده بدنی شما: ${bmi.toFixed(2)}`;

حالا این bmi رو از کجا بیاریم ؟ توی خط آخر تابع calculateBMI تابعی که برای نمایش نوشتیم رو فراخوانی میکنیم و به عنوان پارامتر ارسال میکنیم ؛ یعنی شکل نهایی تابع calculateBMI اینجوریه :

				
					function calculateBMI() {
    const weight = parseFloat(weightInput.value);
    const height = parseFloat(heightInput.value) / 100;

    if (isNaN(weight) || isNaN(height) || height === 0) {
        alert('لطفاً وزن و قد معتبر وارد کنید');
        return;
    }

    const bmi = weight / (height * height);
    displayResult(bmi);
}

خب ؛ در ادامه تابع displayResult باید یسری شرط بنویسیم که وضعیت شاخص توده بدنی هم داینامیک و پویا باشه. پیش نیاز نوشتن این شرط ها تعریف یه متغیر برای ذخیره وضعیته :

				
					let status = ’';

حالا نوبت به شرط ها میرسه ؛ خب شاخص توده بدنی یسری متد های مشخص واسه تعیین وضعیت بدن افراد داره. اون متد ها به ترتیب :

کمتر از ۱۸.۵ : کمبود وزن
بین ۱۸.۵ تا ۲۴.۹ :‌ وزن نرمال
بین ۲۵ تا ۲۹.۹ : اضافه وزن
بیشتر از ۳۰ : چاقی

اگر عدد بدست اومده از محاسبه bmi رو وارد شرط هامون بکنیم میتونیم وضعیت رو پویا به کاربر نمایش بدیم و رنگ پس زمینه و متن وضعیت رو با توجه به وضعیت توده بدنیش هم پویا کنیم :

				
					if (bmi < 18.5) {
        status = 'کمبود وزن';
        bmiStatus.style.color = '#005ed9'
        bmiStatus.style.background = 'rgb(117, 175, 255)'
    } else if (bmi >= 18.5 && bmi < 24.9) {
        status = 'وزن نرمال';
        bmiStatus.style.color = '#00d007'
        bmiStatus.style.background = 'green'
    } else if (bmi >= 25 && bmi < 29.9) {
        status = 'اضافه وزن';
        bmiStatus.style.background = 'rgb(255, 188, 117)'
        bmiStatus.style.color = 'rgb(239, 123, 0)'
    } else {
        status = 'چاقی';
        bmiStatus.style.color = 'red';
        bmiStatus.style.background = 'rgb(150, 0, 0)'
    }

الان که وضعیت رو هم با استفاده از شرط هامون پویا کردیم ؛ نوبت میرسه به اینکه مقدار المان bmiStatus رو با استفاده از متغیر status پویا کنیم :

				
					    bmiStatus.textContent = `وضعیت: ${status}`;

و کلس hidden رو از result حذف کنیم تا خروجی روی صفحه نمایش داده بشه :

				
					    resultDiv.classList.remove('hidden');

ساختار کلی تابع displayResult :

				
					function displayResult(bmi) {
    bmiValue.textContent = `شاخص توده بدنی شما: ${bmi.toFixed(2)}`;

    let status = '';
    if (bmi < 18.5) {
        status = 'کمبود وزن';
        bmiStatus.style.color = '#005ed9'
        bmiStatus.style.background = 'rgb(117, 175, 255)'
    } else if (bmi >= 18.5 && bmi < 24.9) {
        status = 'وزن نرمال';
        bmiStatus.style.color = '#00d007'
        bmiStatus.style.background = 'green'
    } else if (bmi >= 25 && bmi < 29.9) {
        status = 'اضافه وزن';
        bmiStatus.style.background = 'rgb(255, 188, 117)'
        bmiStatus.style.color = 'rgb(239, 123, 0)'
    } else {
        status = 'چاقی';
        bmiStatus.style.color = 'red';
        bmiStatus.style.background = 'rgb(150, 0, 0)'
    }

    bmiStatus.textContent = `وضعیت: ${status}`;
    resultDiv.classList.remove('hidden');
}

ست کردن رویداد کلیک برای محاسبه

و حالا نوبت به این میرسه که یه رویداد کلیک روی دکمه محاسبه ست کنیم و در واقع واسه برنامه تعریف کنیم که هروقت روی این دکمه کلیک شد نتیجه محاسبه رو نشونمون بده :

				
					calculateBtn.addEventListener('click', calculateBMI);

خروجی برنامه :

سورس کد این برنامه همراه html و css به زودی به این صفحه جهت دانلود اضافه میشود.

اگر سوالی در روند توسعه داشتید میتونید از طریق نظرات باهامون درمیون بذارید.

دیدگاهتان را بنویسید لغو پاسخ

نظر خودتان با ما به اشتراک بگذارید ( اٌستادان وب )

دسته بندی مقالات

ممکن است دوست داشته باشید !

اٌستادان وب