A sleek, minimalist banking website crafted with Vanilla JavaScript (ES6+) to showcase advanced object-oriented programming (OOP), DOM manipulation, and UI interactivity. Part of my JavaScript journey, this project highlights my ability to write clean, reusable, and scalable code without relying on frameworksβproving my front-end prowess in its purest form!
- π Modal Windows: Interactive login/open account modals with smooth transitions.
- π Smooth Scrolling: Native, modern scrolling triggered by buttons and navigation.
- π Page Navigation with Event Delegation: Efficient event handling via bubbling.
- ποΈ Tabbed Components: Seamless switching between banking operations.
- π«οΈ Sticky Navigation Bar: Powered by the Intersection Observer API.
- π Reveal on Scroll Animations: Sections animate into view with flair.
- πΌοΈ Lazy Loading Images: Optimized rendering for top-tier performance.
- ποΈ Slider/Carousel: Interactive with arrows, dots, and keyboard navigation.
- β‘ Optimized DOM Handling: Event delegation, bubbling, capturing, and lifecycle management.
- JavaScript (ES6+): OOP-driven, modular structure.
- HTML5 & CSS3: Semantic markup and modern styling.
- Intersection Observer API: Enables scroll animations, sticky nav, and lazy loading.
- 100% Vanilla JS: No frameworks, no librariesβjust raw skill!
bankist-app/
βββ index.html
βββ css/
β βββ style.css
βββ js/
β βββ script.js # Main logic
βββ imgs/
β βββ jpgs # all the image sources used in this project.
βββ README.md
This project demonstrates:
- Mastery of DOM traversal, event propagation, and delegation.
- Utilization of modern ES6+ features:
forEach,bind,const/let, arrow functions, destructuring. - A clean architecture emphasizing OOP principles.
- Performance optimization with lazy loading and minimized repaint/reflow.
- Crafting realistic UI interactivity sans external libraries.
The Bankist App transcends a learning exerciseβitβs a portfolio masterpiece showcasing my front-end engineering strength. It proves I can:
- Build feature-rich web applications from scratch.
- Apply best practices in code structure and maintainability.
- Deliver highly interactive, optimized user experiences.
-
Clone the Repo:
git clone https://github.com/sheharyarr-ahmed/Bankist-Website.git -
Open in Browser:
- Launch
index.htmlin any modern browser. - Explore the live magicβno setup required!
- Launch






