Responsive Multi step form

What are you most proud of, and what would you do differently next time?

1. Seamless State Management I'm most proud of how I implemented the state management system using plain JavaScript. The way the application tracks the current step, billing cycle, selected plan, and add-ons in a single state object makes the code clean and maintainable. When a user toggles between monthly/yearly billing, all prices update simultaneously across plans, add-ons, and the summary page without any glitches.

2. Responsive Design Adaptation Creating a sidebar that seamlessly transitions from a vertical navigation on desktop to a horizontal step indicator on mobile was challenging but rewarding. The layout adapts perfectly at the 760px breakpoint, and the form container gracefully shifts from a card layout to a full-width experience.

3. Dynamic Summary Generation The summary page dynamically calculates totals based on all user selections, including the base plan price and selected add-ons. It updates in real-time when users change their billing preference, providing instant feedback.

4. Validation with Clear Feedback The form validation provides immediate, clear error messages without being intrusive. Each input field shows validation states, and the user can't proceed until all fields are properly filled, preventing data entry errors.

What challenges did you encounter, and how did you overcome them?

Challenge 1: Dynamic Price Updates The Problem: Switching between monthly and yearly billing required updating prices in three different places: the plan cards, add-on items, and the summary page. Initially, I was duplicating logic across multiple functions.

The Solution: I created centralized updatePlanPrices() and updateAddonPrices() functions that handle all price updates in one place. When the billing toggle is clicked, these functions update the DOM everywhere necessary, ensuring consistency. Challenge 2: Maintaining State Across Steps The Problem: Users can go back and forth between steps, and all their selections must be preserved. I needed a way to track what was selected without losing data when navigating.

The Solution: I used a single state object that persists throughout the session. When the user returns to a step, the UI reflects their previous selections from the state. For the summary page, I regenerate the content based on the current state each time it's rendered.

What specific areas of your project would you like help with?

1.Use a Framework (React/Vue) While vanilla JS worked well, a framework would have made state management more elegant. React's useState and useEffect hooks would have simplified the reactive updates, especially for the summary page and price calculations.

2.Accessibility-First Approach I would build the form with accessibility in mind from the start, adding ARIA labels, proper focus management, and keyboard navigation support. This would make the form usable for everyone, regardless of their assistive technology needs.

3.Abstract Business Logic The price calculation logic is currently spread across multiple functions. I would create a separate price service or utility module that centralizes all pricing logic, making it easier to maintain and test.