کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 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 {
font-size: 18px;
margin-bottom: 10px;
display: block;
}
input {
padding: 10px;
width: calc(100% - 20px);
margin-bottom: 20px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
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 پیاده‌سازی می‌کنیم. این بخش شامل محاسبه میزان آب توصیه‌شده برای مصرف روزانه بر اساس وزن کاربر است.
```javascript
// انتخاب المان‌های HTML
const calculateBtn = document.getElementById('calculateBtn');
const weightInput = document.getElementById('weight');
const resultDiv = document.getElementById('result');
// افزودن رویداد کلیک به دکمه محاسبه
calculateBtn.addEventListener('click', function() {
const weight = parseFloat(weightInput.value);
if (isNaN(weight) || weight <= 0) {
resultDiv.textContent = "لطفاً وزن معتبر وارد کنید.";
return;
}
// محاسبه میزان آب مورد نیاز (بر اساس فرمول 35 میلی‌لیتر به ازای هر کیلوگرم وزن)
const waterIntake = weight * 35; // مقدار آب بر حسب میلی‌لیتر
const waterInLiters = (waterIntake / 1000).toFixed(2); // تبدیل به لیتر
// نمایش نتیجه
resultDiv.textContent = `میزان آب توصیه‌شده برای شما: ${waterInLiters} لیتر در روز.`;
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، یک ورودی عددی برای وارد کردن وزن، یک دکمه برای محاسبه، و بخشی برای نمایش نتیجه است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **رویداد کلیک**: وقتی کاربر روی دکمه "محاسبه" کلیک می‌کند، وزن وارد شده بررسی شده و مقدار آب توصیه‌شده محاسبه می‌شود.
- **محاسبه میزان آب**: مقدار آب مورد نیاز بر اساس وزن کاربر و با استفاده از فرمول "35 میلی‌لیتر به ازای هر کیلوگرم وزن" محاسبه می‌شود.
### نتیجه‌گیری
این پروژه **محاسبه‌گر روزانه آب** یک ابزار مفید و ساده است که می‌تواند به افراد کمک کند تا از سلامت بدن خود مراقبت کنند و مطمئن شوند که میزان کافی آب در روز مصرف می‌کنند. این برنامه به خوبی از مفاهیم پایه JavaScript مانند دستکاری DOM و رویدادهای کاربر استفاده می‌کند. شما میتوانید این پروژه را گسترش دهید و ویژگی‌هایی مانند اضافه کردن هشدار برای یادآوری نوشیدن آب یا نمایش فواید مصرف آب اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **محاسبه‌گر روزانه آب** یک ابزار ساده است که با استفاده از HTML، CSS و JavaScript می‌باشد
