How To Create a Banking Application in JavaScript, HTML and CSS
In this JavaScript Tutorial, we will see how to create a simple banking application using JavaScript, HTML5, CSS3 and Chart.js .
We'll build a financial dashboard that includes real-time balance tracking, interactive transaction management, dynamic chart visualization, and a responsive user interface.
This banking project demonstrates essential web development concepts including DOM manipulation, event handling, data visualization with Chart.js, CSS Grid and Flexbox layouts.
What We Are Gonna Use In This Project:
- JavaScript Programming Language.- HTML and CSS.
- Chart.js .
- Visual Studio Editor.
Project Source Code:
- Chart Initialization
Creates and configures the interactive balance chart using Chart.js.
// Create the chart for balance history
function initChart() {
const ctx = document.getElementById('balance-chart').getContext('2d');
chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Balance',
data: [],
borderColor: '#FF7600',
backgroundColor: 'rgba(255, 118, 0, 0.1)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(255, 255, 255, 0.05)'
},
ticks: {
color: '#B0B0B0'
}
},
x: {
grid: {
display: false
},
ticks: {
color: '#B0B0B0',
maxRotation: 0,
maxTicksLimit: 5
}
}
},
plugins: {
legend: {
display: false
},
tooltip: {
mode: 'index',
intersect: false,
backgroundColor: 'rgba(30, 30, 30, 0.9)',
titleColor: '#FFFFFF',
bodyColor: '#FFFFFF',
borderColor: '#FF7600',
borderWidth: 1
}
}
}
});
}
- Balance Display Updates.
A simple function that updates the balance display on the screen.
// Update the balance display
function updateBalance() {
// Show balance with 2 decimal places
balanceElement.textContent = `$${balance.toFixed(2)}`;
}
- Transaction Recording.
This function handles the creation of new transactions.
// Add a new transaction to history
function addTransaction(type, amount) {
// Create a transaction object with type, amount and date
const transaction = {
type, // 'deposit' or 'withdraw'
amount,
date: new Date() // Current date and time
};
// Add to transactions list
transactions.push(transaction);
// Update the display
updateTransactionHistory();
updateChart();
// Reset scroll to top to show newest transactions
transactionHistory.scrollTop = 0;
}
- Transaction History.
Display all the transactions (↑ for deposits, ↓ for withdrawals).
// Update the transaction history display
function updateTransactionHistory() {
// Clear the current list
transactionHistory.innerHTML = '';
// Loop through transactions in reverse order (newest first)
transactions.slice().reverse().forEach((transaction, index) => {
// Create a new transaction element
const transactionElement = document.createElement('div');
transactionElement.classList.add('transaction', transaction.type);
// Set icon based on transaction type
const iconContent = transaction.type === 'deposit' ? '↑' : '↓';
// Fill in the transaction details
transactionElement.innerHTML = `
<div class="transaction-icon">${iconContent}</div>
<div class="transaction-info">
<span class="transaction-type">${transaction.type}</span>
<span class="transaction-date">
${transaction.date.toLocaleString()}</span>
</div>
<span class="transaction-amount">
$${transaction.amount.toFixed(2)}</span>
`;
// Add animation to make it fade in
transactionElement.style.animation =
`fadeIn 0.3s ease-out ${index * 0.05}s both`;
transactionHistory.appendChild(transactionElement);
});
}
- Chart Data Updates.
Keeps the balance chart synchronized with transaction data.
// Update the chart with new data
function updateChart() {
// Create labels (T1, T2, etc.) for each transaction
chart.data.labels = transactions.map((_, index) => `T${index + 1}`);
// Calculate running balance for each point
let runningBalance = 0;
chart.data.datasets[0].data = transactions.map(transaction => {
// Add amount for deposits, subtract for withdrawals
runningBalance += transaction.type === 'deposit' ?
transaction.amount : -transaction.amount;
return runningBalance;
});
// Update the chart
chart.update();
}
- Display error message.
// Show error popup
function showError(message) {
// Set the error message
errorMessage.textContent = message;
// Show the modal
errorModal.style.display = 'block';
errorModal.classList.add('show');
}
- Dismiss The Error Message.
// Hide error popup
function hideError() {
// Start the hiding animation
errorModal.classList.remove('show');
// After animation finishes, hide the modal
setTimeout(() => {
errorModal.style.display = 'none';
}, 300);
}
- Transaction Processing.
// Handle deposit or withdraw
function handleTransaction(type) {
// Get amount from input and convert to number
const amount = parseFloat(amountInput.value);
// Check if amount is valid
if (isNaN(amount) || amount <= 0) {
showError('Please enter a valid positive number');
return;
}
// Check if there's enough money for withdrawal
if (type === 'withdraw' && amount > balance) {
showError('Insufficient funds');
return;
}
// Update balance
balance += type === 'deposit' ? amount : -amount;
// Add to transaction history
addTransaction(type, amount);
// Update balance display
updateBalance();
// Clear input field
amountInput.value = '';
}
- Button Click Handlers.
// Button click events
depositBtn.addEventListener('click', () => handleTransaction('deposit'));
withdrawBtn.addEventListener('click', () => handleTransaction('withdraw'));
- Date Display.
// Show today's date in the header
currentDateElement.textContent = new Date().toLocaleDateString('en-US', {
year: 'numeric', month: 'long', day: 'numeric'
});
