کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد **محاسبه‌گر شاخص توده بدنی (BMI)** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا با وارد کردن قد و وزن خود، شاخص توده بدنی خود را محاسبه کنند و همچنین نتیجه را مشاهده کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای محاسبه‌گر BMI ایجاد می‌کنیم.
```html
محاسبه‌گر BMI
محاسبه‌گر شاخص توده بدنی (BMI)
```
### 2. **CSS**
برای طراحی ظاهری محاسبه‌گر BMI از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
label {
text-align: left;
font-weight: bold;
}
input {
padding: 10px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
margin-top: 10px;
}
.result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش محاسبه BMI را انجام می‌دهد.
```javascript
// انتخاب فرم و بخش نمایش نتیجه
const bmiForm = document.getElementById('bmiForm');
const bmiResultDiv = document.getElementById('bmiResult');
// افزودن رویداد ارسال به فرم
bmiForm.addEventListener('submit', function(e) {
e.preventDefault(); // جلوگیری از بارگذاری مجدد صفحه
// گرفتن وزن و قد از ورودی‌ها
const weight = parseFloat(document.getElementById('weight').value);
const height = parseFloat(document.getElementById('height').value);
// محاسبه BMI
const bmi = weight / (height * height);
// نمایش نتیجه
bmiResultDiv.textContent = `شاخص توده بدنی (BMI): ${bmi.toFixed(2)}`;
// تعیین وضعیت بر اساس BMI
if (bmi < 18.5) {
bmiResultDiv.textContent += ' - کم وزن';
} else if (bmi >= 18.5 && bmi < 24.9) {
bmiResultDiv.textContent += ' - وزن نرمال';
} else if (bmi >= 25 && bmi < 29.9) {
bmiResultDiv.textContent += ' - اضافه وزن';
} else {
bmiResultDiv.textContent += ' - چاقی';
}
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی‌های وزن و قد و دکمه‌ای برای محاسبه BMI است. همچنین یک بخش برای نمایش نتیجه دارد.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **رویداد ارسال**: وقتی کاربر فرم را ارسال می‌کند، BMI محاسبه می‌شود و نتیجه نمایش داده می‌شود.
- **محاسبه BMI**: BMI با فرمول `وزن / (قد * قد)` محاسبه می‌شود.
- **تعیین وضعیت**: بر اساس مقدار BMI، وضعیت کاربر (کم وزن، وزن نرمال، اضافه وزن، چاقی) تعیین می‌شود و نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **محاسبه‌گر BMI** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM، رویدادهای کاربر و محاسبات است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری اضافه کنید، مانند ذخیره‌سازی تاریخچه BMI یا طراحی‌های مختلف. از کدنویسی لذت ببرید!
