Welcome to my Single Page Application (SPA) built entirely with vanilla JavaScript! This project demonstrates how to create a dynamic, seamless user experience without relying on external frameworks or libraries. By leveraging modern JavaScript features, reusable web components, and the browser's native capabilities, this SPA showcases efficient navigation, state management, and modular design—all while maintaining simplicity and performance.
Vanilla web components are a powerful way to create reusable, encapsulated UI elements without relying on frameworks. Below is an example of a reusable modal component that contains a custom weather fetch component.
This project demonstrates the power of vanilla JavaScript and Web Components by creating a dynamic Pokémon search and display app. Using native browser capabilities, it incorporates a simple yet effective state management system to allow users to select and persist their favorite Pokémon. This showcases how stateful applications can be built without external frameworks, maintaining high performance, modular design, and ease of understanding while leveraging reusable web components.
State management in this application is handled using vanilla JavaScript, leveraging the simplicity of `localStorage` and custom events. When the form is submitted, the input data is captured, stored in `localStorage`, and used to update the application state dynamically. Custom events ensure seamless communication between components, allowing the user's name to be updated instantly across the application. This approach demonstrates how powerful and efficient state management can be, even without external libraries or frameworks.