Minor adjustment

src/app/Display/Bank.ts

@@ -19,7 +19,7 @@ class Account {
     withdraw(amount: number): void {
         if (amount > 0 && amount <= this.balance) {
             this.balance -= amount;
-            console.log(`Wit hdrawn ${amount}. New balance: ${this.balance}`);
+            console.log(`Withdrawn ${amount}. New balance: ${this.balance}`);
         } else {
             console.log("Invalid withdrawal amount or insufficient funds.");
         }
@@ -33,11 +33,16 @@ class Account {
         return this.accountNumber;
     }
 
-    transfer(amount: number): boolean {
+    transfer(amount: number, toAccount: Account): boolean {
         if (amount > 0 && amount <= this.balance) {
-            this.balance -= amount;
+            this.withdraw(amount);
+            toAccount.deposit(amount);
+            console.log(
+                `Transferred ${amount} to account ${toAccount.getAccountNumber()}.`,
+            );
             return true;
         } else {
+            console.log("Invalid transfer amount or insufficient funds.");
             return false;
         }
     }
@@ -89,26 +94,55 @@ export class Bank {
         }
     }
 
-    getBalance(accountNumber: string): void {
+    getBalance(accountNumber: string): number {
         const account = this.findAccount(accountNumber);
         if (account) {
             console.log(
                 `Balance for account ${accountNumber}: ${account.getBalance()}`,
             );
+            return account.getBalance();
         } else {
             console.log("Account not found.");
+            return 0; // or throw an error or return null to indicate account not found
         }
     }
+
+    getBalancee(accountNumber: string): number {
+        return this.getBalance(accountNumber);
+    }
+
+    transfer(
+        fromAccountNumber: string,
+        toAccountNumber: string,
+        amount: number,
+    ): void {
+        const fromAccount = this.findAccount(fromAccountNumber);
+        const toAccount = this.findAccount(toAccountNumber);
+        if (fromAccount && toAccount) {
+            fromAccount.transfer(amount, toAccount);
+        } else {
+            console.log("One or both accounts not found.");
+        }
+    }
+
+    getAccount() {
+        return this.accounts;
+    }
 }
 
-//Working test cases
+// Working test cases
 
 const bank = new Bank();
 bank.createAccount("1234567890", 1000);
 bank.deposit("1234567890", 500);
 bank.withdraw("1234567890", 200);
 bank.getBalance("1234567890");
+
 bank.createAccount("0987654321");
 bank.deposit("0987654321", 2000);
 bank.getBalance("0987654321");
-bank.withdraw("0987654321", 3000);
+bank.withdraw("0987654321", 3000); // This will trigger "Invalid withdrawal amount or insufficient funds."
+
+bank.transfer("1234567890", "0987654321", 300);
+bank.getBalance("1234567890");
+bank.getBalance("0987654321");

src/app/Display/Display.component.css

@@ -0,0 +1,90 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f8f9fa;
+    color: #343a40;
+    margin: 0;
+    padding: 20px;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    color: #007bff;
+    margin-bottom: 40px;
+}
+
+.section {
+    margin-bottom: 40px;
+}
+
+.section h2 {
+    color: #007bff;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #007bff;
+    padding-bottom: 10px;
+}
+
+form {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 10px;
+}
+
+form label {
+    align-self: center;
+}
+
+form input[type="text"],
+form input[type="number"],
+form button {
+    padding: 10px;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+}
+
+form input[type="text"]:focus,
+form input[type="number"]:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
+}
+
+form button {
+    grid-column: span 2;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+form button:hover {
+    background-color: #0056b3;
+}
+
+#display,
+#balance-result {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #e9ecef;
+    border-radius: 4px;
+    border: 1px solid #ced4da;
+}
+
+@media (max-width: 600px) {
+    form {
+        grid-template-columns: 1fr;
+    }
+
+    form button {
+        grid-column: span 1;
+    }
+}

src/app/Display/Display.component.html

@@ -5,12 +5,18 @@ <h1>Bank Account Management System</h1>
         <h2>Create Account</h2>
         <form id="create-account-form">
             <label for="create-account-number">Account Number:</label>
-            <input type="text" id="create-account-number" required />
+            <input
+                type="number"
+                id="create-account-number"
+                pattern="\d{10}"
+                title="Account number must be exactly 10 digits"
+                required
+            />
             <label for="create-account-holder">Holder Name:</label>
             <input type="text" id="create-account-holder" required />
             <label for="create-account-balance">Initial Deposit:</label>
             <input type="number" id="create-account-balance" required />
-            <button id="submitt" type="submit">Create Account</button>
+            <button id="submitt" type="button">Create Account</button>
         </form>
         <div id="display"></div>
     </div>
@@ -19,30 +25,46 @@ <h2>Create Account</h2>
         <h2>Deposit</h2>
         <form id="deposit-form">
             <label for="deposit-account-number">Account Number:</label>
-            <input type="text" id="deposit-account-number" required />
+            <input type="number" id="deposit-account-number" required />
             <label for="deposit-amount">Amount:</label>
             <input type="number" id="deposit-amount" required />
-            <button type="submit">Deposit</button>
+            <button id="depositt" type="button">Deposit</button>
         </form>
     </div>
 
     <div class="section">
         <h2>Withdraw</h2>
         <form id="withdraw-form">
             <label for="withdraw-account-number">Account Number:</label>
-            <input type="text" id="withdraw-account-number" required />
+            <input type="number" id="withdraw-account-number" required />
             <label for="withdraw-amount">Amount:</label>
             <input type="number" id="withdraw-amount" required />
-            <button type="submit">Withdraw</button>
+            <button id="withdraww" type="button">Withdraw</button>
         </form>
     </div>
 
     <div class="section">
         <h2>Check Balance</h2>
         <form id="balance-form">
             <label for="balance-account-number">Account Number:</label>
-            <input type="text" id="balance-account-number" required />
-            <button id="Check" type="submit">Check Balance</button>
+            <input type="number" id="balance-account-number" required />
+            <button id="Check" type="button">Check Balance</button>
+        </form>
+        <div id="balance-result"></div>
+    </div>
+
+    <div class="section">
+        <h2>Transfer</h2>
+        <form id="balance-form">
+            <label for="transfer-from-account-number"
+                >Account Number from:</label
+            >
+            <input type="number" id="transfer-from-account-number" required />
+            <label for="transfer-to-account-number">Account Number to:</label>
+            <input type="number" id="transfer-to-account-number" required />
+            <label for="withdraw-amount">Amount:</label>
+            <input type="number" id="transfer-amount" required />
+            <button id="transfer" type="button">Transfer</button>
         </form>
         <div id="balance-result"></div>
     </div>