Skip to content

Commit 6f500b3

Browse files
Piyush-RwtPiyush-Rwt
authored
Add files via upload
1 parent c13fa23 commit 6f500b3

File tree

3 files changed

+566
-0
lines changed

3 files changed

+566
-0
lines changed

‎index.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Modern Bank App</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="background-overlay"></div>
12+
13+
<div class="container">
14+
<header class="app-header">
15+
<div class="header-content">
16+
<i class="fas fa-university logo-icon"></i>
17+
<h1>NeoBank <span>Digital Banking</span></h1>
18+
</div>
19+
</header>
20+
21+
<nav class="app-nav">
22+
<button class="nav-btn" onclick="showSection('create')">
23+
<i class="fas fa-user-plus"></i>
24+
<span>New Account</span>
25+
</button>
26+
<button class="nav-btn" onclick="showSection('transact')">
27+
<i class="fas fa-exchange-alt"></i>
28+
<span>Transactions</span>
29+
</button>
30+
<button class="nav-btn" onclick="showSection('view')">
31+
<i class="fas fa-search-dollar"></i>
32+
<span>Account Info</span>
33+
</button>
34+
</nav>
35+
36+
<!-- Create Account Section -->
37+
<section id="create" class="app-section">
38+
<div class="section-header">
39+
<i class="fas fa-id-card"></i>
40+
<h2>Create New Account</h2>
41+
</div>
42+
<form id="createForm">
43+
<div class="form-group">
44+
<label><i class="fas fa-user"></i> Full Name</label>
45+
<input type="text" id="fullName" required>
46+
</div>
47+
<div class="form-group">
48+
<label><i class="fas fa-wallet"></i> Initial Deposit ($)</label>
49+
<input type="number" id="initialDeposit" required min="50">
50+
</div>
51+
<button type="button" class="action-btn primary" onclick="createAccount()">
52+
<i class="fas fa-plus-circle"></i> Create Account
53+
</button>
54+
</form>
55+
<div id="accountCreated" class="status-card success"></div>
56+
</section>
57+
58+
<!-- Transaction Section -->
59+
<section id="transact" class="app-section">
60+
<div class="section-header">
61+
<i class="fas fa-coins"></i>
62+
<h2>Account Transactions</h2>
63+
</div>
64+
<form id="transactionForm">
65+
<div class="form-group">
66+
<label><i class="fas fa-credit-card"></i> Account Number</label>
67+
<input type="text" id="accountNumber" required>
68+
</div>
69+
<div class="form-group">
70+
<label><i class="fas fa-money-bill-wave"></i> Amount ($)</label>
71+
<input type="number" id="amount" required min="1">
72+
</div>
73+
<div class="transaction-grid">
74+
<button type="button" class="action-btn success" onclick="handleTransaction('deposit')">
75+
<i class="fas fa-arrow-down"></i> Deposit
76+
</button>
77+
<button type="button" class="action-btn danger" onclick="handleTransaction('withdraw')">
78+
<i class="fas fa-arrow-up"></i> Withdraw
79+
</button>
80+
</div>
81+
</form>
82+
<div id="transactionResult" class="status-card"></div>
83+
</section>
84+
85+
<!-- View Account Section -->
86+
<section id="view" class="app-section">
87+
<div class="section-header">
88+
<i class="fas fa-file-invoice-dollar"></i>
89+
<h2>Account Information</h2>
90+
</div>
91+
<form id="viewForm">
92+
<div class="form-group">
93+
<label><i class="fas fa-search"></i> Account Number</label>
94+
<input type="text" id="viewAccountNumber" required>
95+
</div>
96+
<button type="button" class="action-btn primary" onclick="viewAccountDetails()">
97+
<i class="fas fa-file-alt"></i> View Details
98+
</button>
99+
</form>
100+
<div id="accountDetails" class="account-card"></div>
101+
</section>
102+
</div>
103+
104+
<script src="script.js"></script>
105+
</body>
106+
</html>

‎script.js‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
let accounts = JSON.parse(localStorage.getItem('bankAccounts')) || [];
2+
3+
function showSection(sectionId) {
4+
document.querySelectorAll('.app-section').forEach(section => {
5+
section.classList.remove('active');
6+
});
7+
document.getElementById(sectionId).classList.add('active');
8+
clearMessages();
9+
}
10+
11+
function clearMessages() {
12+
document.querySelectorAll('.status-card').forEach(msg => {
13+
msg.style.display = 'none';
14+
});
15+
}
16+
17+
function createAccount() {
18+
const accountNumber = `NEO-${Date.now().toString().slice(-6)}`;
19+
const name = document.getElementById('fullName').value;
20+
const balance = parseFloat(document.getElementById('initialDeposit').value);
21+
const successMessage = document.getElementById('accountCreated');
22+
23+
if (balance < 50) {
24+
alert('Minimum initial deposit is $50');
25+
return;
26+
}
27+
28+
accounts.push({
29+
accountNumber,
30+
name,
31+
balance,
32+
transactions: [{
33+
type: 'initial deposit',
34+
amount: balance,
35+
date: new Date().toISOString()
36+
}]
37+
});
38+
39+
localStorage.setItem('bankAccounts', JSON.stringify(accounts));
40+
41+
successMessage.innerHTML = `
42+
<i class="fas fa-check-circle"></i>
43+
<h3>Account Created Successfully!</h3>
44+
<div class="account-details">
45+
<p><strong>Account Number:</strong> ${accountNumber}</p>
46+
<p><strong>Account Holder:</strong> ${name}</p>
47+
<p><strong>Initial Balance:</strong> $${balance.toFixed(2)}</p>
48+
</div>
49+
`;
50+
successMessage.style.display = 'block';
51+
document.getElementById('createForm').reset();
52+
}
53+
54+
function handleTransaction(type) {
55+
const accNumber = document.getElementById('accountNumber').value;
56+
const amount = parseFloat(document.getElementById('amount').value);
57+
const resultDiv = document.getElementById('transactionResult');
58+
const account = accounts.find(acc => acc.accountNumber === accNumber);
59+
60+
resultDiv.className = 'status-card'; // Reset classes
61+
62+
if (!account) {
63+
resultDiv.classList.add('error');
64+
resultDiv.innerHTML = `
65+
<i class="fas fa-times-circle"></i>
66+
<h3>Account Not Found!</h3>
67+
<p>Please check the account number</p>
68+
`;
69+
resultDiv.style.display = 'block';
70+
return;
71+
}
72+
73+
if (type === 'deposit') {
74+
account.balance += amount;
75+
account.transactions.push({
76+
type: 'deposit',
77+
amount,
78+
date: new Date().toISOString()
79+
});
80+
resultDiv.classList.add('success');
81+
resultDiv.innerHTML = `
82+
<i class="fas fa-check-circle"></i>
83+
<h3>Deposit Successful!</h3>
84+
<p>Amount: $${amount.toFixed(2)}</p>
85+
<p>New Balance: $${account.balance.toFixed(2)}</p>
86+
`;
87+
} else if (type === 'withdraw') {
88+
if (account.balance >= amount) {
89+
account.balance -= amount;
90+
account.transactions.push({
91+
type: 'withdrawal',
92+
amount,
93+
date: new Date().toISOString()
94+
});
95+
resultDiv.classList.add('success');
96+
resultDiv.innerHTML = `
97+
<i class="fas fa-check-circle"></i>
98+
<h3>Withdrawal Successful!</h3>
99+
<p>Amount: $${amount.toFixed(2)}</p>
100+
<p>Remaining Balance: $${account.balance.toFixed(2)}</p>
101+
`;
102+
} else {
103+
resultDiv.classList.add('error');
104+
resultDiv.innerHTML = `
105+
<i class="fas fa-exclamation-triangle"></i>
106+
<h3>Insufficient Funds!</h3>
107+
<p>Available Balance: $${account.balance.toFixed(2)}</p>
108+
`;
109+
}
110+
}
111+
112+
resultDiv.style.display = 'block';
113+
localStorage.setItem('bankAccounts', JSON.stringify(accounts));
114+
document.getElementById('transactionForm').reset();
115+
}
116+
117+
function viewAccountDetails() {
118+
const accNumber = document.getElementById('viewAccountNumber').value;
119+
const detailsDiv = document.getElementById('accountDetails');
120+
const account = accounts.find(acc => acc.accountNumber === accNumber);
121+
122+
detailsDiv.innerHTML = ''; // Clear previous content
123+
124+
if (account) {
125+
detailsDiv.innerHTML = `
126+
<div class="account-header">
127+
<i class="fas fa-user-circle"></i>
128+
<h3>${account.name}'s Account</h3>
129+
</div>
130+
<div class="account-info">
131+
<p><i class="fas fa-id-card"></i> <strong>Account Number:</strong> ${account.accountNumber}</p>
132+
<p><i class="fas fa-wallet"></i> <strong>Balance:</strong> $${account.balance.toFixed(2)}</p>
133+
</div>
134+
<div class="transaction-history">
135+
<h4><i class="fas fa-history"></i> Recent Transactions</h4>
136+
${account.transactions.slice(-5).reverse().map(transaction => `
137+
<div class="transaction-item ${transaction.type}">
138+
<div class="transaction-icon">
139+
${transaction.type === 'deposit' ?
140+
'<i class="fas fa-arrow-down success"></i>' :
141+
'<i class="fas fa-arrow-up danger"></i>'}
142+
</div>
143+
<div class="transaction-details">
144+
<p class="transaction-type">${transaction.type.toUpperCase()}</p>
145+
<p class="transaction-amount">$${transaction.amount.toFixed(2)}</p>
146+
<p class="transaction-date">${new Date(transaction.date).toLocaleDateString()}</p>
147+
</div>
148+
</div>
149+
`).join('')}
150+
</div>
151+
`;
152+
} else {
153+
detailsDiv.innerHTML = `
154+
<div class="error-message">
155+
<i class="fas fa-exclamation-triangle"></i>
156+
<h3>Account Not Found</h3>
157+
<p>Please check the account number and try again</p>
158+
</div>
159+
`;
160+
}
161+
document.getElementById('viewForm').reset();
162+
}
163+
164+
// Initialize default view
165+
showSection('create');

0 commit comments

Comments
 (0)