JhayBank is an interactive digital banking simulation built with HTML, CSS, and JavaScript, designed to replicate real-world financial workflows through a dynamic and responsive user interface.
The application demonstrates advanced frontend concepts including client-side authentication, class-based architecture, and private data handling using modern JavaScript features. Core account data such as movements, PIN, transaction dates, and outgoing totals are encapsulated using private class fields (#), ensuring better structure and data integrity.
It also integrates Local Storage for persistence, Intersection Observer API for optimized animations, and timing functions like setTimeout and setInterval for real-time interactions.
- Create accounts with validated input fields
- Login verification using Local Storage
- Real-time success and error alerts
- Account deletion with complete data removal
- Personalized greeting based on time of day
- Real-time balance display with local date & time
- Transaction history with relative dates (e.g., "Today", "1 day ago")
- Sort transactions (ascending / descending)
- Instant feedback on login and account creation
- Initial balance of 1,000,000 (local currency)
- Transfers simulate withdrawals with processing feedback
- Loan requests act as deposits:
- Approved if ≤ 3% of balance
- Rejected if above threshold
- Dynamic balance updates after every transaction
- All data stored and updated in Local Storage
- Intersection Observer API for blur-to-clear image reveal on scroll
- Sticky navigation with hover effects
- Animated login and account creation forms
- Feature tabs and testimonial carousel
- Fully responsive design (mobile & desktop)
- Password show/hide toggle
- 5-minute automatic session timer
- Warning notification at 1 minute remaining
- Auto logout on timeout with re-login required
- HTML5 & CSS3 – layout and styling
- JavaScript (ES6+) – logic, DOM manipulation, state management
- Local Storage API – client-side data persistence
- Intersection Observer API – scroll-based animations
- No backend or database (data stored locally)
- No real user-to-user transfers
- Data tied to browser storage
- Backend integration (Node.js, database)
- Multi-user transfer functionality
- Data visualization (charts & analytics)
- Secure authentication (hashed credentials)
- Structuring applications using class-based architecture
- Managing state and UI updates dynamically
- Implementing private fields for data security
- Using browser APIs like Intersection Observer
- Handling time-based logic with timers
- Automatic account number generation on signup
- Profile image upload support
- Bills payment integration
- User account editing (first name, last name, and password)
- Logout feature
- One-click clipboard copy
JhayCodes
Frontend Developer | JavaScript Developer | Aspiring Full-Stack Engineer
GitHub- @JhayCodesDev
Twitter - @JhayCode
Instagram - @jhaycodes_
LinkedIn - Joshua Odusanya
This project was inspired by concepts from Jonas Schmedtmann’s JavaScript course.
While the core idea of a banking application was influenced by his teaching, this project was independently extended with additional features, custom logic, UI improvements, and enhanced functionality to create a more interactive and personalized experience.
The project reflects my own understanding and implementation of JavaScript concepts learned throughout the course.