کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **محاسبه‌گر کالری** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا با وارد کردن اطلاعات خود، کالری مورد نیاز روزانه خود را محاسبه کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای محاسبه‌گر کالری ایجاد می‌کنیم.
```html
محاسبه‌گر کالری
محاسبه‌گر کالری
```
### 2. **CSS**
برای طراحی ظاهری محاسبه‌گر کالری از 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 {
display: block;
margin: 10px 0 5px;
}
input, select {
width: 100%;
padding: 8px;
margin-bottom: 15px;
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: 18px;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق محاسبه‌گر را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
document.getElementById('calorieForm').addEventListener('submit', function(e) {
e.preventDefault();
// دریافت مقادیر ورودی
const age = parseInt(document.getElementById('age').value);
const weight = parseInt(document.getElementById('weight').value);
const height = parseInt(document.getElementById('height').value);
const gender = document.getElementById('gender').value;
const activityLevel = document.getElementById('activityLevel').value;
// محاسبه BMR (نرخ متابولیسم پایه)
let bmr;
if (gender === 'male') {
bmr = 10 * weight + 6.25 * height - 5 * age + 5; // برای مردان
} else {
bmr = 10 * weight + 6.25 * height - 5 * age - 161; // برای زنان
}
// فاکتور فعالیت
let activityMultiplier;
switch (activityLevel) {
case 'sedentary':
activityMultiplier = 1.2;
break;
case 'light':
activityMultiplier = 1.375;
break;
case 'moderate':
activityMultiplier = 1.55;
break;
case 'active':
activityMultiplier = 1.725;
break;
case 'very-active':
activityMultiplier = 1.9;
break;
}
// محاسبه کالری مورد نیاز روزانه
const dailyCalories = Math.round(bmr * activityMultiplier);
// نمایش نتیجه
document.getElementById('result').textContent = `کالری مورد نیاز روزانه شما: ${dailyCalories} کالری`;
});
```
### توضیحات کد:
1. **HTML**: شامل فرم برای وارد کردن سن، وزن، قد، جنسیت و سطح فعالیت است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **دریافت مقادیر ورودی**: مقادیر ورودی از فرم دریافت می‌شود.
- **محاسبه BMR**: نرخ متابولیسم پایه با استفاده از فرمول‌های مخصوص به جنسیت محاسبه می‌شود.
- **محاسبه کالری**: کالری مورد نیاز روزانه با ضرب BMR در فاکتور فعالیت محاسبه می‌شود.
- **نمایش نتیجه**: نتیجه به کاربر نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **محاسبه‌گر کالری** یک مثال عالی برای یادگیری نحوه کار با JavaScript و دستکاری DOM است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی تاریخچه محاسبات، اضافه کردن گزینه‌های تغذیه و یا طراحی گرافیکی بهتر اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **محاسبه‌گر کالری** با استفاده از HTML، CSS و JavaScript می‌باشد
