{"id":49551497,"url":"https://github.com/gumballoon/pricing-component-with-toggle","last_synced_at":"2026-05-02T22:44:26.755Z","repository":{"id":309886515,"uuid":"1037891418","full_name":"gumballoon/pricing-component-with-toggle","owner":"gumballoon","description":"Challenge from Frontend Mentor, originally titled ‘Pricing component with toggle’, focusing on accessible custom toggle controls, responsive layouts, and hover/focus interactions.","archived":false,"fork":false,"pushed_at":"2025-08-14T10:58:19.000Z","size":227,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-02T22:43:46.587Z","etag":null,"topics":["bootstrap","css","frontend-mentor","html5","javascript","mobile-first","react","reactjs","responsive-design","toggle-switches"],"latest_commit_sha":null,"homepage":"https://gumballoon.github.io/pricing-component-with-toggle/","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/gumballoon.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-08-14T09:29:33.000Z","updated_at":"2025-09-08T17:54:29.000Z","dependencies_parsed_at":"2025-08-14T11:32:14.373Z","dependency_job_id":"9ec2aaf2-c848-410f-8208-567a27e4930f","html_url":"https://github.com/gumballoon/pricing-component-with-toggle","commit_stats":null,"previous_names":["gumballoon/pricing-component-with-toggle"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gumballoon/pricing-component-with-toggle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gumballoon%2Fpricing-component-with-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gumballoon%2Fpricing-component-with-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gumballoon%2Fpricing-component-with-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gumballoon%2Fpricing-component-with-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gumballoon","download_url":"https://codeload.github.com/gumballoon/pricing-component-with-toggle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gumballoon%2Fpricing-component-with-toggle/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32552377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T22:28:24.418Z","status":"ssl_error","status_checked_at":"2026-05-02T22:28:14.225Z","response_time":132,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["bootstrap","css","frontend-mentor","html5","javascript","mobile-first","react","reactjs","responsive-design","toggle-switches"],"created_at":"2026-05-02T22:44:25.827Z","updated_at":"2026-05-02T22:44:26.746Z","avatar_url":"https://github.com/gumballoon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pricing Component with Toggle - Frontend Mentor Challenge\n\nA responsive pricing component built with React and Vite, featuring an accessible toggle control for switching between monthly and annual billing options.\n\n## 🎯 Challenge Overview\n\nThis Frontend Mentor challenge focuses on building an accessible custom toggle control and testing layout skills. The project requires creating a pricing component that allows users to switch between monthly and annual pricing plans with smooth transitions and proper accessibility features.\n\n## 💼 Portfolio Project\n\nThis project also serves as a portfolio demonstration showcasing:\n- **React Development**: Component composition and state management\n- **Basic Accessibility**: Toggle switch with role attribute\n- **Responsive Design**: Mobile-first approach with CSS Grid/Flexbox\n- **CSS Animations**: Smooth transitions and hover effects\n- **Modern Tooling**: Vite build system and ESLint configuration\n\n## ✨ Features\n\n- **Interactive Toggle**: Custom-built toggle switch for billing frequency\n- **Responsive Design**: Optimal layout across all device sizes\n- **Basic Accessibility**: Toggle switch with semantic role attribute\n- **Hover States**: Interactive feedback for buttons and toggle\n- **Smooth Animations**: CSS transitions for toggle and pricing updates\n- **Modern React**: Built with React 18 and Vite\n\n## 🛠️ Built With\n\n- **React** - Component-based UI library\n- **Vite** - Fast build tool and development server\n- **CSS3** - Custom properties, Grid, and Flexbox\n- **ESLint** - Code linting and formatting\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js (version 14 or higher)\n- npm or yarn package manager\n\n### Installation\n\n1. Clone the repository and navigate to the project folder\n2. Install dependencies: `npm install`\n3. Start the development server: `npm run dev`\n\n## 📁 Project Structure\n\n```\n├── index.html              # Main HTML template\n├── src/\n│   ├── App.jsx             # Main application component\n│   ├── App.css             # Global application styles\n│   ├── PricingDashboard.jsx # Main pricing container component\n│   ├── PricingToggle.jsx    # Toggle switch component\n│   ├── PricingCard.jsx      # Individual pricing card component\n│   ├── PricingCardButton.jsx # Card action button component\n│   ├── main.jsx            # Application entry point\n│   └── index.css           # Base styles and CSS reset\n├── images/                 # Background SVG assets\n├── design/                 # Design reference images\n├── package.json            # Project dependencies and scripts\n└── vite.config.js         # Vite configuration\n```\n\n## 🎨 Design Features\n\n- **Clean Layout**: Card-based pricing display with centered alignment\n- **Visual Hierarchy**: Clear typography and spacing for easy scanning\n- **Color Scheme**: Modern gradient backgrounds and accent colors\n- **Interactive Elements**: Hover effects and focus states throughout\n- **Background Graphics**: Decorative SVG elements for visual appeal\n\n## 🔧 Functionality\n\n### Core Features Implemented:\n\n- ✅ Custom toggle control with basic switch role\n- ✅ Dynamic pricing updates based on billing frequency\n- ✅ Responsive layout for mobile and desktop\n- ✅ Hover states for buttons and toggle\n- ✅ Smooth CSS transitions\n- ✅ Component-based React architecture\n\n### User Actions:\n\n1. **Toggle Billing Frequency**: Click or use keyboard to switch between monthly/annual\n2. **Navigate with Keyboard**: Tab through all interactive elements\n3. **Select Plan**: Click \"Learn More\" buttons on pricing cards\n4. **Responsive Interaction**: Touch-friendly on mobile devices\n5. **Visual Feedback**: Hover effects provide immediate user feedback\n\n## 💡 Key Implementation Details\n\n- **Toggle Control**: Built with semantic HTML and switch role\n- **State Management**: React hooks for billing frequency state\n- **CSS Custom Properties**: Dynamic pricing updates via CSS variables\n- **Mobile-First Design**: Responsive breakpoints starting from mobile\n- **Component Architecture**: Reusable, modular React components\n\n## 🌟 Future Enhancements\n\n- Improve accessibility with proper labeling and ARIA attributes\n- Add keyboard focus indicators for all interactive elements\n- Add payment integration with Stripe or similar\n- Implement plan comparison tooltips\n- Add animations between pricing tiers\n- Include testimonials or feature comparison\n\n## 📱 Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## 📄 License\n\nThis project is for educational purposes as part of the Frontend Mentor challenge.\n\n## Author\n\n- GitHub - [@gumballoon](https://github.com/gumballoon)\n- Frontend Mentor - [@gumballoon](https://www.frontendmentor.io/profile/gumballoon)\n- CSS Battle - [@gumballoon](https://cssbattle.dev/player/gumballoon)\n\n## 🙏 Acknowledgments\n\n- Frontend Mentor for the design and challenge\n- Design assets and requirements provided by Frontend Mentor\n- React team for the excellent development experience\n- Vite team for the fast build tooling\n\n---\n\n**Frontend Mentor Challenge**: [Pricing Component with Toggle](https://www.frontendmentor.io/challenges/pricing-component-with-toggle)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgumballoon%2Fpricing-component-with-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgumballoon%2Fpricing-component-with-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgumballoon%2Fpricing-component-with-toggle/lists"}