{"id":31766293,"url":"https://github.com/ayokanmi-adejola/multi-step-form","last_synced_at":"2025-10-10T00:30:55.320Z","repository":{"id":304197840,"uuid":"1018069509","full_name":"Ayokanmi-Adejola/Multi-Step-Form","owner":"Ayokanmi-Adejola","description":"A Responsive, and accessible multi-step form implementation featuring responsive design, real-time validation, and WCAG 2.1 AA compliance. Built with vanilla JavaScript, modern CSS, and semantic HTML as part of Frontend Mentor challenge.","archived":false,"fork":false,"pushed_at":"2025-07-11T15:09:42.000Z","size":967,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-30T00:00:38.101Z","etag":null,"topics":["css3","google-fonts","html5","mobile-first-workflow","vanilla-js"],"latest_commit_sha":null,"homepage":"https://multi-step-form-wheat-sigma.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ayokanmi-Adejola.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-11T14:55:23.000Z","updated_at":"2025-09-15T13:29:20.000Z","dependencies_parsed_at":"2025-07-11T17:31:22.838Z","dependency_job_id":"fb779cc7-cd8b-4383-9d5d-99a630acc2b3","html_url":"https://github.com/Ayokanmi-Adejola/Multi-Step-Form","commit_stats":null,"previous_names":["ayokanmi-adejola/multi-step-form.","ayokanmi-adejola/multi-step-form"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ayokanmi-Adejola/Multi-Step-Form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FMulti-Step-Form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FMulti-Step-Form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FMulti-Step-Form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FMulti-Step-Form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayokanmi-Adejola","download_url":"https://codeload.github.com/Ayokanmi-Adejola/Multi-Step-Form/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FMulti-Step-Form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002363,"owners_count":26083356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","google-fonts","html5","mobile-first-workflow","vanilla-js"],"created_at":"2025-10-10T00:30:15.024Z","updated_at":"2025-10-10T00:30:55.308Z","avatar_url":"https://github.com/Ayokanmi-Adejola.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multi-Step Form Application\n\n\u003cdiv align=\"center\"\u003e\n\n![Design preview for the Multi-step form coding challenge](preview.jpg)\n\n**A responsive, and accessible multi-step form implementation**\n\n[![Frontend Mentor](https://img.shields.io/badge/Frontend%20Mentor-Challenge-blue?style=for-the-badge)](https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ)\n[![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML)\n[![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)\n[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n\n\n\n\u003c/div\u003e\n\n---\n\n\n\n## 🎯 Overview\n\nThis project is a comprehensive implementation of a multi-step subscription form, developed as part of the Frontend Mentor coding challenge. It demonstrates advanced front-end development skills including responsive design, form validation, state management, and accessibility best practices.\n\n### Challenge Requirements\n\nThe application successfully implements all required functionality:\n\n- ✅ **Sequential Navigation** - Complete each step of the form sequence\n- ✅ **Bidirectional Flow** - Navigate back to previous steps to update selections\n- ✅ **Dynamic Summary** - Real-time summary generation with order confirmation\n- ✅ **Responsive Design** - Optimal layout across all device screen sizes\n- ✅ **Interactive States** - Comprehensive hover and focus states for all elements\n- ✅ **Form Validation** - Robust client-side validation with user-friendly error messages\n- ✅ **Accessibility Compliance** - WCAG 2.1 AA standards implementation\n\n## ✨ Features\n\n### 🚀 Core Functionality\n- **Progressive Form Flow** - Intuitive step-by-step user journey with validation gates\n- **State Persistence** - Maintains user selections across navigation and browser sessions\n- **Real-time Validation** - Immediate feedback with contextual error messaging\n- **Dynamic Pricing Engine** - Automatic price calculations based on billing preferences\n- **Interactive Summary** - Comprehensive order review with modification capabilities\n- **Smooth Animations** - Polished transitions and micro-interactions\n\n### 🎨 User Experience\n- **Professional UI Design** - Clean, modern interface following design system principles\n- **Responsive Layout** - Seamless experience across desktop, tablet, and mobile devices\n- **Interactive Elements** - Comprehensive hover, focus, and active states\n- **Loading States** - Smooth transitions between form steps\n- **Error Handling** - User-friendly validation with clear recovery paths\n\n### ♿ Accessibility Excellence\n- **WCAG 2.1 AA Compliance** - Meets international accessibility standards\n- **Keyboard Navigation** - Full functionality without mouse interaction\n- **Screen Reader Support** - Comprehensive ARIA implementation\n- **Focus Management** - Logical tab order and visible focus indicators\n- **Color Accessibility** - High contrast ratios and color-blind friendly design\n- **Semantic Markup** - Proper HTML structure for assistive technologies\n\n### 📱 Technical Implementation\n- **Vanilla JavaScript** - No external dependencies for optimal performance\n- **Modern CSS** - Custom properties, flexbox, and grid layouts\n- **Progressive Enhancement** - Works without JavaScript for basic functionality\n- **Cross-browser Compatibility** - Tested across all modern browsers\n- **Performance Optimized** - Minimal bundle size with efficient rendering\n\n## 🛠️ Technology Stack\n\n\u003cdiv align=\"center\"\u003e\n\n| Frontend | Styling | Tooling | Standards |\n|----------|---------|---------|-----------|\n| ![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=flat-square\u0026logo=html5\u0026logoColor=white) | ![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=flat-square\u0026logo=css3\u0026logoColor=white) | ![Git](https://img.shields.io/badge/Git-F05032?style=flat-square\u0026logo=git\u0026logoColor=white) | ![W3C](https://img.shields.io/badge/W3C-005A9C?style=flat-square\u0026logo=w3c\u0026logoColor=white) |\n| ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square\u0026logo=javascript\u0026logoColor=black) | ![Google Fonts](https://img.shields.io/badge/Google%20Fonts-4285F4?style=flat-square\u0026logo=google-fonts\u0026logoColor=white) | ![VS Code](https://img.shields.io/badge/VS%20Code-007ACC?style=flat-square\u0026logo=visual-studio-code\u0026logoColor=white) | ![WCAG](https://img.shields.io/badge/WCAG%202.1-AA-green?style=flat-square) |\n\n\u003c/div\u003e\n\n### Core Technologies\n- **HTML5** - Semantic markup with accessibility attributes\n- **CSS3** - Modern styling with custom properties and responsive design\n- **JavaScript ES6+** - Class-based architecture with modern syntax\n- **Ubuntu Font Family** - Professional typography from Google Fonts\n\n### Development Approach\n- **Mobile-First Design** - Responsive breakpoints starting from 375px\n- **Progressive Enhancement** - Core functionality works without JavaScript\n- **Component Architecture** - Modular, reusable code patterns\n- **Performance-First** - Optimized for speed and efficiency\n\n## 🏗️ Architecture \u0026 Implementation\n\n### JavaScript Architecture\n```javascript\nclass MultiStepForm {\n  // State management with persistent data\n  // Event-driven navigation system\n  // Real-time validation engine\n  // Dynamic pricing calculations\n}\n```\n\n### CSS Methodology\n- **Custom Properties** - Consistent design tokens and theming\n- **BEM-inspired Naming** - Scalable and maintainable class structure\n- **Mobile-First Responsive** - Adaptive layouts for all screen sizes\n- **Component-Based Styles** - Reusable and modular CSS patterns\n\n### Key Implementation Features\n- **Form State Management** - Persistent data across navigation\n- **Validation Engine** - Real-time feedback with regex patterns\n- **Accessibility Layer** - ARIA attributes and keyboard navigation\n- **Animation System** - Smooth transitions and micro-interactions\n- **Error Handling** - Comprehensive user feedback mechanisms\n\n## 📁 Project Structure\n\n```\nmulti-step-form-main/\n├── 📄 index.html              # Semantic HTML structure with accessibility\n├── 🎨 styles.css              # Comprehensive CSS system with design tokens\n├── ⚡ script.js               # Modern JavaScript with class-based architecture\n├── 📋 test-checklist.md       # Quality assurance testing guidelines\n├── 📖 README.md               # Comprehensive project documentation\n├── 🎯 assets/\n│   ├── 🔤 fonts/              # Ubuntu font family (Regular, Medium, Bold)\n│   └── 🖼️ images/             # Optimized SVG icons and background graphics\n├── 🎨 design/                 # Frontend Mentor design references\n│   ├── desktop-design-*.jpg   # Desktop layout specifications\n│   └── mobile-design-*.jpg    # Mobile layout specifications\n└── 📋 style-guide.md          # Design system specifications\n```\n\n### File Organization\n- **Separation of Concerns** - HTML structure, CSS presentation, JavaScript behavior\n- **Asset Optimization** - Compressed images and efficient font loading\n- **Documentation** - Comprehensive guides for development and testing\n- **Design References** - Complete visual specifications for implementation\n\n## 🚀 Getting Started\n\n### Prerequisites\n- **Modern Web Browser** - Chrome 90+, Firefox 88+, Safari 14+, Edge 90+\n- **No Build Tools Required** - Pure vanilla implementation\n- **No External Dependencies** - Self-contained application\n\n### Quick Start\n```bash\n# Clone the repository\ngit clone https://github.com/Ayokanmi-Adejola/multi-step-form.git\n\n# Navigate to project directory\ncd multi-step-form\n\n# Open in browser\nopen index.html\n# or\nstart index.html  # Windows\n```\n\n### Development Setup\n```bash\n# For development with live server\nnpx live-server .\n\n# Or use VS Code Live Server extension\n# Right-click index.html → \"Open with Live Server\"\n```\n\n### User Journey\n1. **📝 Personal Information** - Enter name, email, and phone number with real-time validation\n2. **📋 Plan Selection** - Choose subscription tier (Arcade/Advanced/Pro) and billing cycle\n3. **🎯 Add-ons** - Select optional services to enhance the experience\n4. **📊 Summary Review** - Confirm selections with dynamic pricing calculation\n5. **✅ Confirmation** - Complete the process with success feedback\n\n## 🔍 Implementation Details\n\n### Form Validation System\n```javascript\n// Real-time validation with comprehensive error handling\nvalidateField(fieldName) {\n  // Email regex validation\n  // Phone number format checking\n  // Required field validation\n  // Custom error messaging\n}\n```\n\n#### Validation Rules\n| Field | Requirements | Error Handling |\n|-------|-------------|----------------|\n| **Name** | Required, 2+ characters | Real-time feedback |\n| **Email** | Valid format, required | Regex pattern matching |\n| **Phone** | Valid format, required | International format support |\n| **Plan** | One selection required | Visual error indicators |\n| **Add-ons** | Optional selections | Dynamic pricing updates |\n\n### State Management\n- **Persistent Data** - Form state maintained across navigation\n- **Local Storage** - Optional browser storage for session persistence\n- **Validation State** - Error states preserved during navigation\n- **Dynamic Updates** - Real-time price calculations and UI updates\n\n### Pricing Engine\n```javascript\n// Dynamic pricing calculation\ncalculateTotal() {\n  const planPrice = this.planPrices[plan][billing];\n  const addonTotal = addons.reduce((sum, addon) =\u003e\n    sum + this.addonPrices[addon][billing], 0);\n  return planPrice + addonTotal;\n}\n```\n\n## 🌐 Browser Support\n\n\u003cdiv align=\"center\"\u003e\n\n| Browser | Version | Status |\n|---------|---------|--------|\n| ![Chrome](https://img.shields.io/badge/Chrome-90+-4285F4?style=flat-square\u0026logo=google-chrome\u0026logoColor=white) | 90+ | ✅ Fully Supported |\n| ![Firefox](https://img.shields.io/badge/Firefox-88+-FF7139?style=flat-square\u0026logo=firefox\u0026logoColor=white) | 88+ | ✅ Fully Supported |\n| ![Safari](https://img.shields.io/badge/Safari-14+-000000?style=flat-square\u0026logo=safari\u0026logoColor=white) | 14+ | ✅ Fully Supported |\n| ![Edge](https://img.shields.io/badge/Edge-90+-0078D4?style=flat-square\u0026logo=microsoft-edge\u0026logoColor=white) | 90+ | ✅ Fully Supported |\n| ![Mobile](https://img.shields.io/badge/Mobile-iOS%2FAndroid-green?style=flat-square) | Latest | ✅ Optimized |\n\n\u003c/div\u003e\n\n## ♿ Accessibility\n\n### WCAG 2.1 AA Compliance\n- **Color Contrast** - All text meets 4.5:1 contrast ratio requirements\n- **Keyboard Navigation** - Full functionality accessible via keyboard\n- **Screen Readers** - Comprehensive ARIA labels and live regions\n- **Focus Management** - Logical tab order and visible focus indicators\n- **Semantic HTML** - Proper heading hierarchy and landmark regions\n\n### Accessibility Features\n```html\n\u003c!-- ARIA labels for screen readers --\u003e\n\u003cdiv role=\"navigation\" aria-label=\"Form steps\"\u003e\n\u003cinput aria-describedby=\"email-error\" aria-invalid=\"false\"\u003e\n\u003cdiv role=\"alert\" id=\"email-error\"\u003e\u003c/div\u003e\n\n\u003c!-- Live regions for dynamic content --\u003e\n\u003cdiv aria-live=\"polite\" aria-atomic=\"true\"\u003e\u003c/div\u003e\n```\n\n## 🚀 Performance\n\n### Optimization Metrics\n- **First Contentful Paint** - \u003c 1.5s\n- **Largest Contentful Paint** - \u003c 2.5s\n- **Cumulative Layout Shift** - \u003c 0.1\n- **Time to Interactive** - \u003c 3.5s\n\n### Performance Features\n- **Minimal Dependencies** - Zero external JavaScript libraries\n- **Optimized Assets** - Compressed images and efficient font loading\n- **Efficient DOM** - Minimal reflows and optimized event handling\n- **CSS Optimization** - Custom properties and efficient selectors\n\n## 🧪 Testing\n\n### Quality Assurance\n- **Cross-browser Testing** - Verified across all major browsers\n- **Responsive Testing** - Tested on multiple device sizes\n- **Accessibility Testing** - Screen reader and keyboard navigation verified\n- **Performance Testing** - Lighthouse scores optimized\n- **User Testing** - Validated user experience flows\n\n### Test Coverage\n- ✅ Form validation scenarios\n- ✅ Navigation flow testing\n- ✅ Responsive breakpoint verification\n- ✅ Accessibility compliance checks\n- ✅ Error handling validation\n\n## 🔮 Future Enhancements\n\n### Planned Features\n- **Backend Integration** - API connectivity for real form submissions\n- **Payment Processing** - Stripe/PayPal integration for actual transactions\n- **User Accounts** - Registration and login functionality\n- **Data Persistence** - Cloud storage for user preferences\n- **Analytics** - User behavior tracking and optimization\n\n### Technical Improvements\n- **Progressive Web App** - Offline functionality and app-like experience\n- **Advanced Animations** - Enhanced micro-interactions and transitions\n- **Internationalization** - Multi-language support\n- **Dark Mode** - Alternative color scheme implementation\n- **Advanced Validation** - Server-side validation integration\n\n## 📚 Learning Outcomes\n\n### Technical Skills Developed\n- **Modern JavaScript** - ES6+ features, class-based architecture, async programming\n- **Advanced CSS** - Custom properties, responsive design, accessibility considerations\n- **Form UX** - Multi-step flows, validation patterns, error handling\n- **Accessibility** - WCAG compliance, screen reader optimization, keyboard navigation\n- **Performance** - Optimization techniques, efficient DOM manipulation\n\n### Professional Skills\n- **Project Planning** - Requirements analysis, technical specification\n- **Code Quality** - Clean code principles, documentation, testing\n- **User Experience** - Design implementation, usability considerations\n- **Problem Solving** - Debugging, optimization, cross-browser compatibility\n\n\n### Development Guidelines\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\n## 🙏 Acknowledgments\n\n- **Frontend Mentor** - For providing the design challenge and community\n- **Ubuntu Font Team** - For the beautiful typography\n- **Web Accessibility Initiative** - For WCAG guidelines and best practices\n- **MDN Contributors** - For comprehensive web development documentation\n\n---\n\n\n## 👤 Author\n\n- Frontend Mentor - [Ayokanmi Adejola](https://www.frontendmentor.io/profile/Adejola-Ayokanmi)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fmulti-step-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayokanmi-adejola%2Fmulti-step-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fmulti-step-form/lists"}