Frontend Mentor | Multi-step form

I'm most proud of how the form dynamically adapts to user selections—particularly the toggle between monthly and yearly plans, the automatic price recalculations, and the way selected add-ons update both visually and in the summary section. The real-time form validation with accessibility considerations (like aria-invalid) also adds to a more inclusive user experience.

Next time, I would refactor parts of the JavaScript for better modularity and maintainability—especially the logic around plan toggling and summary updates, which could be broken into smaller, reusable functions. I’d also consider separating concerns more clearly (e.g., using separate files for validation logic, UI updates, and pricing calculations) and possibly integrating a frontend framework like React or Svelte for more scalable state management and reactivity.

One of the main challenges was managing the state of multiple interdependent components—such as syncing the selected plan with its price, toggling between billing cycles, and updating add-on selections in both UI and summary. It was easy for small logic issues to cause inconsistencies, especially when toggling between monthly and yearly pricing.

To overcome this, I carefully structured event listeners and used consistent class toggling (selected-plan, shift-l, shift-r) to track the UI state. I also centralized logic for recalculating prices and updating summaries through dedicated functions like summaryHeadUpdate() and calculateTotal() to avoid redundancy. Testing and refining each step interaction helped ensure a smooth user experience across different screen sizes and inputs.

1. Form Validation Enhancements
   I'd like feedback on improving the validation logic. Right now, it's handled on blur and before progressing to the next step, but I’m unsure if the current method is scalable or the most accessible for screen readers.

2. Responsive Layout Optimization
   The layout changes for smaller screens, but I feel the transition between desktop and mobile could be more fluid. I'd appreciate suggestions on better ways to handle this, especially regarding flex/grid layout restructuring.

3. Code Readability and Refactoring
   I used a lot of forEach loops and manual DOM manipulation. I'd love tips on how to refactor this JavaScript to make it more modular, maintainable, or even more performant—perhaps using component-based structures or utility functions.

4. Accessibility
   I added basic ARIA attributes, but I’m not sure if the form is fully accessible. I'd like detailed feedback on improving keyboard navigation, focus management between steps, and screen reader compatibility.

5. Scalable Pricing Logic
   The pricing and toggle logic are currently hardcoded and a bit repetitive. I’d appreciate suggestions on how to structure pricing data (e.g., using objects or JSON) to make the logic more dynamic and easier to extend.