Banking Application Using HTML, CSS And Javascript

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' 
            });