کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **برنامه مدیریت بودجه** (Custom Budget App) با استفاده از 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: 300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
input {
width: 100%;
padding: 10px;
margin-top: 5px;
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;
}
#summary {
margin-top: 20px;
text-align: left;
}
#summary p {
margin: 5px 0;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
let totalIncome = 0;
let totalExpense = 0;
// انتخاب عناصر HTML
const incomeInput = document.getElementById('income');
const expenseInput = document.getElementById('expense');
const addExpenseBtn = document.getElementById('addExpenseBtn');
const totalIncomeDisplay = document.getElementById('totalIncome');
const totalExpenseDisplay = document.getElementById('totalExpense');
const remainingDisplay = document.getElementById('remaining');
// تابع برای افزودن هزینه
addExpenseBtn.addEventListener('click', function() {
const income = parseFloat(incomeInput.value);
const expense = parseFloat(expenseInput.value);
// بررسی اعتبار ورودی‌ها
if (isNaN(income) || income < 0) {
alert('لطفاً یک مقدار صحیح برای درآمد وارد کنید.');
return;
}
if (isNaN(expense) || expense < 0) {
alert('لطفاً یک مقدار صحیح برای هزینه وارد کنید.');
return;
}
// به روز رسانی مقادیر کل
totalIncome = income;
totalExpense += expense;
// به روز رسانی نمایشگرها
totalIncomeDisplay.textContent = `درآمد کل: ${totalIncome}`;
totalExpenseDisplay.textContent = `هزینه کل: ${totalExpense}`;
const remaining = totalIncome - totalExpense;
remainingDisplay.textContent = `موجودی باقی‌مانده: ${remaining}`;
// پاک کردن ورودی‌ها
incomeInput.value = '';
expenseInput.value = '';
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی‌های درآمد و هزینه، دکمه افزودن هزینه و خلاصه مالی است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **مقادیر کل**: متغیرهایی برای نگهداری درآمد و هزینه کل.
- **رویداد کلیک**: وقتی کاربر روی دکمه "افزودن هزینه" کلیک می‌کند، درآمد و هزینه به روز می‌شود و موجودی باقی‌مانده محاسبه می‌شود.
### نتیجه‌گیری
این پروژه **برنامه مدیریت بودجه** یک مثال عالی برای یادگیری نحوه کار با JavaScript و مدیریت ورودی‌های کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی داده‌ها در LocalStorage، افزودن تاریخ برای هر هزینه یا درآمد و ایجاد نمودار برای تجزیه و تحلیل هزینه‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه مدیریت بودجه** (Custom Budget App) با استفاده از HTML، CSS و JavaScript می‌باشد
