کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **محاسبه‌گر انعام در JavaScript**
این پروژه به کاربران اجازه می‌دهد تا انعام مورد نظر را بر اساس هزینه کل و درصد انعام تعیین‌شده محاسبه کنند. این برنامه ساده با استفاده از 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: 90%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
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;
margin-bottom: 20px;
}
.result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
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)} تومان | مجموع: ${totalAmount.toFixed(2)} تومان`;
});
```
### توضیحات کد:
1. **HTML**:
- شامل ورودی‌هایی برای مبلغ فاکتور و درصد انعام و یک دکمه برای محاسبه انعام است.
- همچنین یک بخش برای نمایش نتیجه محاسبات.
2. **CSS**:
- طراحی ساده و زیبا برای ورودی‌ها، دکمه‌ها و نمایش نتیجه.
3. **JavaScript**:
- **تعریف متغیرها**: شامل دریافت مقادیر ورودی و عنصر نمایش نتیجه.
- **مدیریت رویداد کلیک**: وقتی کاربر روی دکمه "محاسبه انعام" کلیک می‌کند، محاسبات انجام می‌شود.
- **محاسبات**: انعام و مجموع هزینه محاسبه و نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **محاسبه‌گر انعام** یک مثال عالی برای درک نحوه کار با DOM و پردازش ورودی‌های کاربر در JavaScript است. شما میتوانید ویژگی‌های بیشتری مانند انتخاب نوع خدمات (خوب، متوسط، بد) اضافه کنید تا درصد انعام به طور خودکار تنظیم شود. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **محاسبه‌گر انعام در JavaScript** می‌باشد
