This folder contains interactive front-end projects that use JavaScript to manipulate the Document Object Model (DOM) and respond to user events. These projects focus on connecting user actions to visible interface changes, reinforcing how structure (HTML), presentation (CSS), and behavior (JavaScript) work together in web applications.
The exercises here mark the transition from logic-focused JavaScript into real user interface interactivity, where application state and user input directly control what is rendered on screen.
A small app where users can mark items as favorites by toggling a heart icon.
An emotion rating interface where clicking emoji buttons increments a visible counter.
An interactive story selector that changes displayed content and styling based on user choices.
A real-time character counter that limits input and visually signals when the maximum is reached.
A dynamic filtering interface that displays product cards based on a selected category.
A dynamic roster viewer that renders player cards and filters them by position group, starter status, or Pro Bowl selection.
An accessible editable note interface that tracks content changes and provides status updates using ARIA live regions.
A gallery that opens full-size images in an overlay lightbox and closes via button or overlay click.
An accessible tab interface that synchronizes visual content and ARIA attributes to maintain proper semantic structure and keyboard navigation support.
An accessible theme selector that updates interface styling and accessibility state using ARIA menu patterns.
A stateful browser game where the player competes against the computer using rule-mapped logic and dynamic UI state transitions.
These projects introduced event-driven programming and DOM state management. Instead of executing once and finishing, these applications respond continuously to user input and update the interface in real time.
As complexity increased, the focus expanded from simple class toggling to structured UI patterns driven by data and application state, including:
These exercises reinforced the core front-end principle of synchronizing data, logic, and presentation. Rather than hardcoding interface changes, the UI becomes a direct reflection of application state, improving scalability, maintainability, and clarity of behavior.
This section marks the transition from procedural JavaScript into interactive, state-driven application design.