Multi-Step Registration Wizard

A comprehensive, wizard-style user registration form built with pure HTML, CSS, and Vanilla JavaScript. This application guides users through a structured registration process with multiple steps, custom components, and data validation.

Features

• ✅ 7-Step Registration Process - Complete user onboarding workflow
• ✅ Progress Visibility - Visual progress indicator showing current step and completion status
• ✅ Data Preservation - All entered data is preserved when navigating back/forward
• ✅ Custom Components - US Map state selector and password strength indicator
• ✅ Form Validation - Real-time validation with error messages
• ✅ Conditional Fields - Dynamic fields based on user selections
• ✅ Responsive Design - Works on desktop and mobile devices
• ✅ Modern UI - Clean, professional interface using Tailwind CSS

Setup and Run Instructions

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)

Running the Application

Simply open index.html in your web browser. The application uses ES6 modules and will work directly when opened as a file in modern browsers.

Project Structure

multi-step-wizard/
├── index.html              # Main HTML file
├── styles.css              # Custom CSS styles
├── README.md               # This file
└── js/
    ├── main.js             # Main application controller
    ├── flow-config.js      # Wizard flow configuration
    ├── state-manager.js    # State management system
    ├── utils.js            # Utility functions
    ├── components/
    │   └── USMapSelector.js  # Custom US map state selector
    └── steps/
        ├── AccountStep.js      # Step 1: Account Information
        ├── PersonalStep.js    # Step 2: Personal Details
        ├── VerificationStep.js # Step 3: Email Verification
        ├── BusinessStep.js     # Step 4: Business Details
        ├── SecurityStep.js     # Step 5: Security & Preferences
        ├── PreferencesStep.js  # Step 6: Communication Preferences
        └── ReviewStep.js       # Step 7: Review & Submit

Step-by-Step Breakdown

Step 1: Account Information

• Fields:
  • Email Address (required, validated)
  • Username (required)
• Validation: Email format validation, required field checks

Step 2: Personal Details

• Fields:
  • First Name (required)
  • Last Name (required)
  • Date of Birth (required)
  • Gender (optional)
  • City (optional)
  • State Selection (required) - Custom clickable US map component
• Custom Component: Interactive US map where users click on states to select them

Step 3: Verification

• Fields:
  • OTP Code (required, 6 digits)
• Note: This is a mock verification. Users can enter any 6-digit code to proceed.

Step 4: Business Details

• Fields:
  • Company Name (required)
  • Company Size (required): 1-10, 11-50, or 51+ employees
• Conditional Field: When "51+" is selected, an additional checkbox appears asking "Has a dedicated operations team?"

Step 5: Security & Preferences

• Fields:
  • Password (required)
  • Confirm Password (required)
• Custom Component: Password strength indicator that shows:
  • Weak, Fair, Good, or Strong rating
  • Real-time feedback as user types
  • Visual color coding

Step 6: Preferences

• Fields:
  • Email Notifications (checkboxes):
    • Marketing emails and updates
    • Product updates and new features
    • Newsletter subscription
  • Onboarding Preference (radio buttons):
    • Guided tour
    • Quick setup
    • Skip onboarding
  • Timezone (dropdown)

Step 7: Review & Submit

• Summary Display: Shows all entered information organized by section
• Submit: Final submission with success confirmation

Design Decisions

Architecture

1. Separation of Concerns

The application is structured with clear separation:

• Flow Configuration (flow-config.js): Centralized definition of wizard steps
• State Management (state-manager.js): Centralized state storage and updates
• Step Components (steps/*.js): Individual step implementations
• Utilities (utils.js): Reusable helper functions
• Main Controller (main.js): Orchestrates the wizard flow

2. State Management Pattern

• Centralized State: All form data is stored in a single StateManager instance
• Step-based Storage: Data is organized by step ID for easy access
• Reactive Updates: State changes trigger UI updates through a subscription system
• Data Persistence: State persists across navigation, ensuring no data loss

3. Component-Based Design

Each step is implemented as a class with three core methods:

• render(): Returns HTML string for the step
• bindEvents(): Attaches event listeners after rendering
• validate(): Validates step data before proceeding

4. Flow Configuration

The wizard flow is defined in a single configuration file (flow-config.js), making it easy to:

• Reorder steps
• Add/remove steps
• Modify navigation rules
• Configure validation requirements

Navigation Logic

Back/Next Navigation

• Next Button:

  • Validates current step before proceeding
  • Shows error messages if validation fails
  • Changes to "Submit" button on the last step
  • Preserves all entered data when moving forward

• Back Button:

  • Disabled on the first step
  • Preserves all entered data when moving backward
  • No validation required when going back
  • Restores form fields with previously entered values

Data Preservation

• Automatic Preservation: All form data is automatically saved to state when:

  • User blurs (leaves) an input field
  • User changes a select/dropdown value
  • User checks/unchecks a checkbox
  • User selects a state on the map

• State Restoration: When navigating back to a step:

  • Form fields are pre-populated with saved values
  • Selected states on the map are highlighted
  • Conditional fields are shown/hidden based on saved selections

Custom Components

1. US Map State Selector

• Implementation: SVG-based interactive map using actual US state boundaries
• Features:
  • Clickable state paths with full state boundaries
  • Visual feedback on hover and selection
  • Selected state is highlighted in blue
  • Full state name displayed when selected (e.g., "California" instead of "CA")
• Location: js/components/USMapSelector.js

2. Password Strength Indicator

• Implementation: Real-time password analysis
• Scoring System:
  • Checks: length (8+), lowercase, uppercase, numbers, special characters
  • Score: 0-5 based on criteria met
  • Labels: Weak (0-2), Fair (3), Good (4), Strong (5)
• Features:
  • Color-coded feedback (red, yellow, blue, green)
  • Descriptive messages
  • Debounced updates for performance
• Location: js/utils.js - checkPasswordStrength() function

Validation Strategy

Field-Level Validation

• Required Fields: Checked before proceeding to next step
• Format Validation: Email format, OTP length, password strength
• Cross-Field Validation: Password confirmation matching

Error Display

• Inline Errors: Errors appear below the relevant field
• Visual Feedback: Red text, clear error messages
• Real-time Updates: Errors automatically clear when user starts typing or changing field values

UI/UX Decisions

Progress Visibility

• Progress Steps: Visual indicators at the top showing:
  • Step numbers with checkmarks for completed steps
  • Current step highlighted in blue
  • Step titles for context
• Progress Bar: Animated progress bar showing overall completion percentage

Responsive Design

• Mobile-Friendly: Uses Tailwind CSS responsive utilities
• Grid Layouts: Adapts to screen size (1 column on mobile, 2 columns on desktop)
• Touch-Friendly: Large clickable areas for mobile users

Visual Feedback

• Animations: Smooth transitions between steps
• Color Coding: Consistent color scheme (indigo for primary actions, green for success)
• Loading States: Submit button shows "Submitting..." during submission

Technical Constraints Compliance

✅ Pure JavaScript: No frameworks (React, Angular, Vue) used ✅ ES6 Modules: Modern JavaScript with import/export ✅ DOM Manipulation: All UI updates through vanilla JavaScript ✅ Centralized Flow: Flow definition in single config file ✅ Separated Concerns: Clear separation of flow, state, components, and utilities

Browser Compatibility

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Future Enhancements

Potential improvements that could be added:

• Server-side validation and submission
• Real OTP verification via email/SMS
• More detailed US map with actual state boundaries
• Form field auto-save to localStorage
• Accessibility improvements (ARIA labels, keyboard navigation)
• Multi-language support
• Step skipping for optional sections

Notes

• OTP Verification: Currently accepts any 6-digit code for demonstration purposes
• US Map: Uses an actual SVG map with real state boundaries. States are clickable and show full state names when selected
• Data Storage: All data is stored in memory. No server-side persistence is implemented
• Styling: Uses Tailwind CSS via CDN for rapid development. Can be replaced with custom CSS if needed
• Error Handling: Validation errors automatically clear when users start typing or changing field values for better user experience

License

This project is created for educational/demonstration purposes.