Skip to content

🌐 A minimalist banking landing page built with modern JavaScript (ES6+). Showcases advanced DOM manipulation, event delegation, Intersection Observer API, smooth scrolling, lazy image loading, and slider components. A project highlighting my front-end development skills and mastery of interactive UI design.

Notifications You must be signed in to change notification settings

sheharyarr-ahmed/Bankist-Website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

17 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🏦 Bankist App – Minimalist Banking Website

Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4 Screenshot 5 Screenshot 6 Full View

πŸš€ Overview

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!


🌟 Features

  • πŸ” 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.

πŸ› οΈ Tech Stack

  • 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!

πŸ“‚ Project Structure

bankist-app/
β”œβ”€β”€ index.html
β”œβ”€β”€ css/
β”‚   └── style.css
β”œβ”€β”€ js/
β”‚   └── script.js    # Main logic
β”œβ”€β”€ imgs/
β”‚   └── jpgs     # all the image sources used in this project.
└── README.md

πŸŽ“ Learning Outcomes

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.

πŸ† Why This Project Matters

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.

πŸ”‘ Run Locally

  1. Clone the Repo:

    git clone https://github.com/sheharyarr-ahmed/Bankist-Website.git
    
  2. Open in Browser:

    • Launch index.html in any modern browser.
    • Explore the live magicβ€”no setup required!

About

🌐 A minimalist banking landing page built with modern JavaScript (ES6+). Showcases advanced DOM manipulation, event delegation, Intersection Observer API, smooth scrolling, lazy image loading, and slider components. A project highlighting my front-end development skills and mastery of interactive UI design.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published