کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **سیستم مدیریت بانک** با استفاده از 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: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input {
padding: 10px;
font-size: 16px;
width: calc(100% - 22px);
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #218838;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// آرایه‌ای برای ذخیره حساب‌ها
let accounts = [];
// انتخاب المان‌های HTML
const accountNameInput = document.getElementById('accountName');
const createAccountBtn = document.getElementById('createAccountBtn');
const accountIdInput = document.getElementById('accountId');
const amountInput = document.getElementById('amount');
const depositBtn = document.getElementById('depositBtn');
const withdrawBtn = document.getElementById('withdrawBtn');
const accountList = document.getElementById('accountList');
// تابع برای ایجاد حساب جدید
createAccountBtn.addEventListener('click', function() {
const accountName = accountNameInput.value.trim();
const accountId = accounts.length + 1; // شماره حساب به تعداد حساب‌ها بستگی دارد
if (accountName) {
const newAccount = {
id: accountId,
name: accountName,
balance: 0
};
accounts.push(newAccount);
updateAccountList();
accountNameInput.value = ''; // پاک کردن ورودی نام صاحب حساب
}
});
// تابع برای به‌روزرسانی لیست حساب‌ها
function updateAccountList() {
accountList.innerHTML = ''; // پاک کردن لیست موجودی قبلی
accounts.forEach(account => {
const listItem = document.createElement('li');
listItem.textContent = `${account.name} (شماره حساب: ${account.id}) - موجودی: ${account.balance} تومان`;
accountList.appendChild(listItem);
});
}
// تابع برای واریز مبلغ به حساب
depositBtn.addEventListener('click', function() {
const accountId = parseInt(accountIdInput.value);
const amount = parseFloat(amountInput.value);
const account = accounts.find(acc => acc.id === accountId);
if (account && amount > 0) {
account.balance += amount;
updateAccountList();
amountInput.value = ''; // پاک کردن ورودی مبلغ
}
});
// تابع برای برداشت مبلغ از حساب
withdrawBtn.addEventListener('click', function() {
const accountId = parseInt(accountIdInput.value);
const amount = parseFloat(amountInput.value);
const account = accounts.find(acc => acc.id === accountId);
if (account && amount > 0 && account.balance >= amount) {
account.balance -= amount;
updateAccountList();
amountInput.value = ''; // پاک کردن ورودی مبلغ
}
});
```
### توضیحات کد:
1. **HTML**: شامل ورودی برای ایجاد حساب، ورودی برای شماره حساب و مبلغ و دکمه‌های واریز و برداشت و همچنین نمایش موجودی حساب‌ها است.
2. **CSS**: طراحی ساده و کاربرپسند برای سیستم مدیریت بانک.
3. **JavaScript**:
- **حساب‌ها**: آرایه‌ای برای ذخیره حساب‌ها ایجاد شده است.
- **ایجاد حساب**: وقتی کاربر دکمه "ایجاد حساب" را فشار می‌دهد، یک حساب جدید به لیست اضافه می‌شود.
- **واریز و برداشت**: کاربر می‌تواند مبلغی را به حساب واریز یا از حساب برداشت کند. برنامه موجودی حساب را به‌روزرسانی می‌کند.
### نتیجه‌گیری
این پروژه **سیستم مدیریت بانک** یک مثال عالی برای یادگیری نحوه کار با JavaScript، DOM و مدیریت داده‌ها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ویرایش حساب‌ها، حذف حساب‌ها و ذخیره‌سازی اطلاعات در localStorage اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **سیستم مدیریت بانک** با استفاده از HTML، CSS و JavaScript می‌باشد
