Bankist

Project overview

Key Features:

1. User Authentication:
   • Multiple user accounts each with a unique username and PIN for login.
   • On successful login, a welcome message is displayed, and the application becomes visible.
2. Display & Format Movements:
   • The application dynamically displays the list of all banking movements/deposits/withdrawals for the logged-in user.
   • Movements are displayed with proper formatting, i.e., dates are displayed as ‘days ago,’ and currency is rounded to two decimal places.
3. User Interface Updates:
   • The UI updates to display the summary (incomes, outcomes, and interest), balance, and movements of the current account after each operation.
   • Dynamic creation of current date and time, adjusted to the locale of the user’s browser.
4. Money Transfer:
   • Users can transfer money to other accounts.
   • Validation checks ensure that users can only transfer money if they have sufficient balance and cannot transfer to themselves.
5. Loan Request:
   • Users can request a loan.
   • Loan approval is contingent upon whether there is at least one deposit with at least 10% of the requested loan amount.
6. Account Deletion:
   • Users can delete their accounts by providing the correct username and PIN.
7. Sorting Transactions:
   • The application allows sorting transactions in ascending and descending order with the click of a button.
8. Automatic Logout Timer:
   • A logout timer is set to automatically log out users after a certain period of inactivity to ensure security.
9. Localization and Internationalization:
   • The application uses the Internationalization API to format dates based on the user’s locale.

Code Structure:

The code is structured with a focus on modular functionality, with separate functions handling different aspects of the application, such as displaying movements, calculating and displaying balance, and updating the user interface after transactions.

Data Handling:

The app handles data using arrays to store user account details, movements, and transactions. Several Array methods like map, filter, reduce, find, and some are used for data manipulation and retrieval.

User Interaction:

Event listeners are extensively used for user interactions, capturing clicks and form submissions, thereby enabling the aforementioned features like login, transfers, loans, and account deletion.

Accounts

account1 and account2 objects store information about bank accounts. These include the owner’s name, account movements (transactions), interest rate, PIN, dates of transactions, currency, and locale. The accounts array stores these account objects.

Flow

User logs in by providing a username and PIN. After login, the main UI is displayed, showing the balance, transactions, and other financial summaries. Users can transfer money, request a loan, or close the account.

Conclusion:

The Bankist App demonstrates proficient use of JavaScript, HTML, and CSS to create a functional, secure, and user-friendly banking application. It serves as a practical example of how to build dynamic applications with effective data manipulation and user interaction.

Demo

You can use premaid accounts for check how this app work:

[Account1 – user: js pin: 1111] [Account2 – user: jd pin: 2222] 

Bankist demo