کاربران گرامی در این پروژه به شما پروژه کاربردی  با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر  پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه  های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد

ایجاد یک سیستم مدیریت بودجه (Budget Management System) در JavaScript یک پروژه عالی برای یادگیری نحوه مدیریت داده‌ها و تعامل با کاربر است. در این پروژه، کاربر می‌تواند درآمد و هزینه‌ها را ثبت کند و از آن‌ها یک گزارش کلی دریافت کند.

 

### مراحل پیاده‌سازی پروژه

 

#### ۱. ساختار پروژه

ابتدا یک پوشه جدید به نام `budget-management-system` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `styles.css` و `script.js` بسازید.

 

#### ۲. ایجاد فایل HTML

**index.html**:

 

```html

   

   

   

   

   

   

```

 

#### ۳. ایجاد فایل CSS

**styles.css**:

 

```css

body {

    font-family: Arial, sans-serif;

    background-color: #f4f4f4;

    margin: 0;

    padding: 20px;

    text-align: center;

}

 

.container {

    max-width: 400px;

    margin: auto;

    background-color: white;

    padding: 20px;

    border-radius: 5px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

 

.form-group {

    margin-bottom: 20px;

}

 

input, select {

    width: calc(33.33% - 10px);

    padding: 10px;

    margin: 5px;

    border: 1px solid #ccc;

    border-radius: 4px;

}

 

button {

    padding: 10px 20px;

    font-size: 16px;

    cursor: pointer;

    background-color: #007BFF;

    color: white;

    border: none;

    border-radius: 4px;

}

 

button:hover {

    background-color: #0056b3;

}

 

#report {

    margin-top: 20px;

    text-align: left;

}

 

#total-balance {

    font-weight: bold;

    margin-top: 20px;

}

```

 

#### ۴. پیاده‌سازی منطق سیستم در JavaScript

**script.js**:

 

```javascript

const addButton = document.getElementById('add-btn');

const descriptionInput = document.getElementById('description');

const amountInput = document.getElementById('amount');

const typeSelect = document.getElementById('type');

const reportDiv = document.getElementById('report');

const totalBalanceDiv = document.getElementById('total-balance');

 

let totalIncome = 0;

let totalExpense = 0;

 

// اضافه کردن درآمد یا هزینه

addButton.addEventListener('click', () => {

    const description = descriptionInput.value;

    const amount = parseFloat(amountInput.value);

    const type = typeSelect.value;

 

    if (description && !isNaN(amount)) {

        if (type === 'income') {

            totalIncome += amount;

            reportDiv.innerHTML += `

درآمد: ${description} - ${amount}

`;

        } else {

            totalExpense += amount;

            reportDiv.innerHTML += `

هزینه: ${description} - ${amount}

`;

        }

 

        updateTotalBalance();

        clearInputs();

    } else {

        alert('لطفاً تمام فیلدها را پر کنید.');

    }

});

 

// به‌روزرسانی تراز کل

function updateTotalBalance() {

    const totalBalance = totalIncome - totalExpense;

    totalBalanceDiv.textContent = `تراز کل: ${totalBalance}`;

}

 

// پاک کردن ورودی‌ها

function clearInputs() {

    descriptionInput.value = '';

    amountInput.value = '';

    typeSelect.value = 'income';

}

```

 

### توضیحات کد

1. **HTML**:

   - شامل فیلدهایی برای وارد کردن توضیحات، مقدار و نوع (درآمد یا هزینه) و همچنین یک دکمه برای افزودن موارد است.

 

2. **CSS**:

   - طراحی زیبا برای فرم ورودی و نمایش گزارش.

 

3. **JavaScript**:

   - **اضافه کردن درآمد یا هزینه**: با کلیک روی دکمه "افزودن"، مقدار و توضیحات به گزارش اضافه می‌شود و تراز کل به‌روزرسانی می‌شود.

   - **به‌روزرسانی تراز کل**: تابع `updateTotalBalance` برای محاسبه و نمایش تراز کل استفاده می‌شود.

   - **پاک کردن ورودی‌ها**: تابع `clearInputs` ورودی‌ها را پس از افزودن به گزارش پاک می‌کند.

 

### نحوه اجرای پروژه

1. فایل‌ها را ذخیره کرده و سپس فایل `index.html` را در مرورگر خود باز کنید.

2. توضیحات و مقادیر را وارد کرده و نوع را انتخاب کنید و روی "افزودن" کلیک کنید. گزارشی از درآمدها و هزینه‌ها مشاهده خواهید کرد.

 

### نتیجه‌گیری

با این پروژه، شما یک سیستم مدیریت بودجه ساده را با استفاده از JavaScript پیاده‌سازی کرده‌اید. شما می‌توانید این سیستم را با افزودن ویژگی‌های بیشتر، مانند قابلیت ویرایش و حذف موارد، ایجاد گزارش‌های دقیق‌تر و یا ذخیره‌سازی داده‌ها در محلی یا با استفاده از API گسترش دهید. این پروژه به شما در یادگیری مفاهیم اولیه توسعه وب و مدیریت داده‌ها در JavaScript کمک خواهد کرد.