https://github.com/gumballoon/pricing-component-with-toggle
Challenge from Frontend Mentor, originally titled ‘Pricing component with toggle’, focusing on accessible custom toggle controls, responsive layouts, and hover/focus interactions.
https://github.com/gumballoon/pricing-component-with-toggle
bootstrap css frontend-mentor html5 javascript mobile-first react reactjs responsive-design toggle-switches
Last synced: 2 months ago
JSON representation
Challenge from Frontend Mentor, originally titled ‘Pricing component with toggle’, focusing on accessible custom toggle controls, responsive layouts, and hover/focus interactions.
- Host: GitHub
- URL: https://github.com/gumballoon/pricing-component-with-toggle
- Owner: gumballoon
- Created: 2025-08-14T09:29:33.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-14T10:58:19.000Z (11 months ago)
- Last Synced: 2026-05-02T22:43:46.587Z (2 months ago)
- Topics: bootstrap, css, frontend-mentor, html5, javascript, mobile-first, react, reactjs, responsive-design, toggle-switches
- Language: JavaScript
- Homepage: https://gumballoon.github.io/pricing-component-with-toggle/
- Size: 222 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pricing Component with Toggle - Frontend Mentor Challenge
A responsive pricing component built with React and Vite, featuring an accessible toggle control for switching between monthly and annual billing options.
## 🎯 Challenge Overview
This 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.
## 💼 Portfolio Project
This project also serves as a portfolio demonstration showcasing:
- **React Development**: Component composition and state management
- **Basic Accessibility**: Toggle switch with role attribute
- **Responsive Design**: Mobile-first approach with CSS Grid/Flexbox
- **CSS Animations**: Smooth transitions and hover effects
- **Modern Tooling**: Vite build system and ESLint configuration
## ✨ Features
- **Interactive Toggle**: Custom-built toggle switch for billing frequency
- **Responsive Design**: Optimal layout across all device sizes
- **Basic Accessibility**: Toggle switch with semantic role attribute
- **Hover States**: Interactive feedback for buttons and toggle
- **Smooth Animations**: CSS transitions for toggle and pricing updates
- **Modern React**: Built with React 18 and Vite
## 🛠️ Built With
- **React** - Component-based UI library
- **Vite** - Fast build tool and development server
- **CSS3** - Custom properties, Grid, and Flexbox
- **ESLint** - Code linting and formatting
## 🚀 Getting Started
### Prerequisites
- Node.js (version 14 or higher)
- npm or yarn package manager
### Installation
1. Clone the repository and navigate to the project folder
2. Install dependencies: `npm install`
3. Start the development server: `npm run dev`
## 📁 Project Structure
```
├── index.html # Main HTML template
├── src/
│ ├── App.jsx # Main application component
│ ├── App.css # Global application styles
│ ├── PricingDashboard.jsx # Main pricing container component
│ ├── PricingToggle.jsx # Toggle switch component
│ ├── PricingCard.jsx # Individual pricing card component
│ ├── PricingCardButton.jsx # Card action button component
│ ├── main.jsx # Application entry point
│ └── index.css # Base styles and CSS reset
├── images/ # Background SVG assets
├── design/ # Design reference images
├── package.json # Project dependencies and scripts
└── vite.config.js # Vite configuration
```
## 🎨 Design Features
- **Clean Layout**: Card-based pricing display with centered alignment
- **Visual Hierarchy**: Clear typography and spacing for easy scanning
- **Color Scheme**: Modern gradient backgrounds and accent colors
- **Interactive Elements**: Hover effects and focus states throughout
- **Background Graphics**: Decorative SVG elements for visual appeal
## 🔧 Functionality
### Core Features Implemented:
- ✅ Custom toggle control with basic switch role
- ✅ Dynamic pricing updates based on billing frequency
- ✅ Responsive layout for mobile and desktop
- ✅ Hover states for buttons and toggle
- ✅ Smooth CSS transitions
- ✅ Component-based React architecture
### User Actions:
1. **Toggle Billing Frequency**: Click or use keyboard to switch between monthly/annual
2. **Navigate with Keyboard**: Tab through all interactive elements
3. **Select Plan**: Click "Learn More" buttons on pricing cards
4. **Responsive Interaction**: Touch-friendly on mobile devices
5. **Visual Feedback**: Hover effects provide immediate user feedback
## 💡 Key Implementation Details
- **Toggle Control**: Built with semantic HTML and switch role
- **State Management**: React hooks for billing frequency state
- **CSS Custom Properties**: Dynamic pricing updates via CSS variables
- **Mobile-First Design**: Responsive breakpoints starting from mobile
- **Component Architecture**: Reusable, modular React components
## 🌟 Future Enhancements
- Improve accessibility with proper labeling and ARIA attributes
- Add keyboard focus indicators for all interactive elements
- Add payment integration with Stripe or similar
- Implement plan comparison tooltips
- Add animations between pricing tiers
- Include testimonials or feature comparison
## 📱 Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## 📄 License
This project is for educational purposes as part of the Frontend Mentor challenge.
## Author
- GitHub - [@gumballoon](https://github.com/gumballoon)
- Frontend Mentor - [@gumballoon](https://www.frontendmentor.io/profile/gumballoon)
- CSS Battle - [@gumballoon](https://cssbattle.dev/player/gumballoon)
## 🙏 Acknowledgments
- Frontend Mentor for the design and challenge
- Design assets and requirements provided by Frontend Mentor
- React team for the excellent development experience
- Vite team for the fast build tooling
---
**Frontend Mentor Challenge**: [Pricing Component with Toggle](https://www.frontendmentor.io/challenges/pricing-component-with-toggle)