```

### 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: 90%;

    max-width: 400px;

    text-align: center;

}

h1 {

    margin-bottom: 20px;

}

label {

    display: block;

    margin-bottom: 5px;

}

input {

    width: 100%;

    padding: 10px;

    margin-bottom: 20px;

    border: 1px solid #ccc;

    border-radius: 5px;

}

button {

    padding: 10px 20px;

    font-size: 16px;

    cursor: pointer;

    background-color: #28a745;

    color: white;

    border: none;

    border-radius: 5px;

}

.result {

    margin-top: 20px;

    font-size: 24px;

    font-weight: bold;

    color: #333;

}

```

### 3. **JavaScript**

سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش وزن و قد ورودی را گرفته و BMI را محاسبه می‌کند.

```javascript

// انتخاب عناصر HTML

const calculateBtn = document.getElementById('calculateBtn');

const resultDiv = document.getElementById('result');

// افزودن رویداد کلیک به دکمه

calculateBtn.addEventListener('click', function() {

    // گرفتن وزن و قد

    const weight = parseFloat(document.getElementById('weight').value);

    const height = parseFloat(document.getElementById('height').value);

    // بررسی ورودی‌ها

    if (isNaN(weight) || isNaN(height) || weight <= 0 || height <= 0) {

        resultDiv.textContent = 'لطفاً وزن و قد معتبر وارد کنید.';

        return;

    }

    // محاسبه BMI

    const bmi = (weight / (height * height)).toFixed(2);

    // نمایش نتیجه

    resultDiv.textContent = `شاخص توده بدنی (BMI): ${bmi}`;

});

```

### توضیحات کد:

1. **HTML**: شامل عنوان برنامه، ورودی‌های وزن و قد، دکمه برای محاسبه BMI و بخشی برای نمایش نتیجه است.

2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.

3. **JavaScript**:

   - **ورودی‌ها**: وزن و قد را از ورودی‌ها دریافت می‌کند.

   - **بررسی ورودی‌ها**: از کاربر می‌خواهد وزن و قد معتبری وارد کند.

   - **محاسبه BMI**: با استفاده از فرمول BMI (وزن بر حسب کیلوگرم تقسیم بر مربع قد بر حسب متر).

   - **نمایش نتیجه**: BMI محاسبه‌شده را در صفحه نمایش می‌دهد.

### نتیجه‌گیری

این پروژه **محاسبه‌گر BMI** یک مثال عالی برای یادگیری مفاهیم جاوااسکریپت مانند دستکاری DOM و مدیریت رویدادها است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند طبقه‌بندی BMI (کمبود وزن، وزن نرمال، اضافه وزن و چاقی) به آن اضافه کنید. از کدنویسی لذت ببرید!