کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **محاسبه‌گر انعام (Tip Calculator)** با استفاده از 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: 300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
label {
display: block;
margin: 10px 0 5px;
}
input[type="number"] {
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: #007bff;
color: white;
border: none;
border-radius: 5px;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق محاسبه‌گر انعام را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر HTML
const billAmountInput = document.getElementById('billAmount');
const tipPercentageInput = document.getElementById('tipPercentage');
const calculateBtn = document.getElementById('calculateBtn');
const resultDiv = document.getElementById('result');
// افزودن رویداد کلیک به دکمه محاسبه
calculateBtn.addEventListener('click', function() {
const billAmount = parseFloat(billAmountInput.value);
const tipPercentage = parseFloat(tipPercentageInput.value);
if (isNaN(billAmount) || isNaN(tipPercentage) || billAmount <= 0 || tipPercentage < 0) {
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 از طریق `getElementById`.
- **رویداد کلیک**: محاسبه انعام و مجموع با وارد کردن مقدار صورتحساب و درصد انعام.
- **بررسی ورودی**: اطمینان از اینکه ورودی‌های وارد شده معتبر هستند.
- **محاسبه انعام**: محاسبه مقدار انعام و مجموع صورتحساب و نمایش نتیجه.
### نتیجه‌گیری
این پروژه **محاسبه‌گر انعام** یک مثال ساده و مفید برای یادگیری نحوه کار با JavaScript و دستکاری DOM است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره تاریخچه محاسبات یا تنظیمات پیش‌فرض برای درصد انعام اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **محاسبه‌گر انعام (Tip Calculator)** با استفاده از JavaScript می‌باشد
