Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/finzyphinzy/minimalist-banking

A project that demonstrates mastery in Document Object Manipulation (DOM) through advanced JavaScript techniques.
https://github.com/finzyphinzy/minimalist-banking

Last synced: 11 days ago
JSON representation

A project that demonstrates mastery in Document Object Manipulation (DOM) through advanced JavaScript techniques.

Awesome Lists containing this project

README 

        
# Minimalist Bank Website



Welcome to the Minimalist Bank Website, a project that demonstrates mastery in Document Object Manipulation (DOM) through advanced JavaScript techniques. This web application showcases a minimalist design philosophy, offering a simple yet elegant user interface for a seamless banking experience.



**Link to project:** https://finzyphinzy.github.io/Minimalist-Banking/

**Link to repository:** https://github.com/FinzyPHINZY/Minimalist-Banking/



**Main Page**

bankist1



## How It's Made:



**Tech used:** HTML, CSS, JavaScript



Features

Smooth Scrolling: Enjoy a fluid browsing experience with seamlessly implemented smooth scrolling, enhancing user engagement.



Event Propagation (Bubbling and Capturing): Explore the intricacies of event propagation with both bubbling and capturing phases, ensuring efficient handling of user interactions.



Event Delegation: Optimize event handling by utilizing event delegation, a technique that enhances performance and simplifies code maintenance.



DOM Traversing: Navigate the Document Object Model with ease, leveraging advanced DOM traversal techniques to manipulate elements efficiently.



Sticky Navigation: Implement a responsive and user-friendly sticky navigation bar that enhances accessibility and provides a smooth browsing experience during scrolling.



Slider Document: Create a dynamic slider document with smooth transitions, enhancing visual appeal and user engagement.



**Tabbed Menu**

bankist4



Lifecycle DOM Events: Gain insights into the lifecycle of DOM events, ensuring effective event handling at various stages of page execution.



## Optimizations



Efficient Script Loading (Defer): Optimize script loading by utilizing the defer attribute, enhancing page load performance and ensuring scripts execute in the correct order.



Lazy Loading Images: Improve page loading times and user experience by implementing lazy loading for images, ensuring resources are loaded only when needed.

**Features Page**

bankist2



Intersection Observer API: Leverage the power of the Intersection Observer API to efficiently handle element visibility, enhancing performance and reducing unnecessary computations.



## Lessons Learned:



As an engineer, the pursuit of knowledge is a perpetual journey, irrespective of experience. Motivated by a curiosity to explore advanced DOM manipulations, I opted for a practical approach over a prolonged theoretical study.



Drawing insights from sources like MDN and YouTube, I transformed my learning into a tangible project. Challenges arose, but with dedicated research, I conquered them. This experience highlighted the importance of applying theoretical concepts in a real-world context, dispelling any illusions of superficial knowledge.



This project reinforced the idea that true understanding comes from hands-on application. It demonstrated that tackling challenges in a project setting not only deepens comprehension but also cultivates a problem-solving mindset. The journey affirmed my commitment to continuous learning, emphasizing that theory finds its true meaning when put into practice.



## Contributing



Contributions are welcome! If you have ideas for improvements, bug fixes, or new features, feel free to submit a pull request. Please follow our contribution guidelines.



## License



This project is licensed under the MIT License.



## PS: NOT OPTIMIZED FOR SMALL SCREENS