کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **Tip Calculator** در HTML و JavaScript
این پروژه یک برنامه ساده برای محاسبه انعام (Tip) بر اساس مبلغ فاکتور و درصد انعام انتخابی است. کاربران می‌توانند مبلغ فاکتور و درصد انعام را وارد کرده و نتیجه را مشاهده کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای برنامه Tip Calculator ایجاد می‌کنیم.
```html
محاسبه‌گر انعام
محاسبه‌گر انعام
```
### 2. **CSS**
برای طراحی ظاهری برنامه Tip Calculator از 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: 300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="number"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
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 پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر HTML
const calculateBtn = document.getElementById('calculateBtn');
const billAmountInput = document.getElementById('billAmount');
const tipPercentageInput = document.getElementById('tipPercentage');
const resultDiv = document.getElementById('result');
// افزودن رویداد کلیک به دکمه محاسبه
calculateBtn.addEventListener('click', function() {
// دریافت مقادیر ورودی
const billAmount = parseFloat(billAmountInput.value);
const tipPercentage = parseFloat(tipPercentageInput.value);
// محاسبه انعام
if (isNaN(billAmount) || isNaN(tipPercentage)) {
resultDiv.textContent = 'لطفاً مقادیر صحیحی وارد کنید!';
return;
}
const tipAmount = (billAmount * tipPercentage) / 100;
const totalAmount = billAmount + tipAmount;
// نمایش نتیجه
resultDiv.textContent = `مقدار انعام: ${tipAmount.toFixed(2)} تومان\nکل مبلغ: ${totalAmount.toFixed(2)} تومان`;
});
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان برنامه، فیلدهای ورودی برای مبلغ فاکتور و درصد انعام، و دکمه‌ای برای محاسبه انعام.
2. **CSS**:
- طراحی ساده و کاربرپسند برای فیلدها و دکمه‌ها.
3. **JavaScript**:
- **انتخاب عناصر HTML**: برای دکمه، فیلدهای ورودی و بخش نمایش نتیجه.
- **رویداد کلیک**: محاسبه انعام و کل مبلغ زمانی که کاربر بر روی دکمه کلیک می‌کند.
- **محاسبات**: چک کردن مقادیر ورودی و محاسبه انعام و کل مبلغ.
- **نمایش نتیجه**: نمایش مقدار انعام و کل مبلغ به کاربر.
### نتیجه‌گیری
این پروژه **محاسبه‌گر انعام** یک مثال عالی برای یادگیری نحوه کار با ورودی‌های کاربر و انجام محاسبات ساده در JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره تاریخچه انعام‌ها یا امکان انتخاب انعام از پیش تعیین شده اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **Tip Calculator** در HTML و JavaScript می‌باشد
