{"id":31766304,"url":"https://github.com/ayokanmi-adejola/interactive-pricing-component","last_synced_at":"2025-10-10T00:33:03.062Z","repository":{"id":307731104,"uuid":"1030530528","full_name":"Ayokanmi-Adejola/Interactive-Pricing-Component","owner":"Ayokanmi-Adejola","description":"A modern, responsive web component featuring a custom range slider for selecting pricing tiers and a toggle for monthly/yearly billing with automatic 25% discount calculations. Built with semantic HTML5, CSS3 animations, and vanilla JavaScript. Optimized for mobile and desktop with smooth user interactions and accessibility features","archived":false,"fork":false,"pushed_at":"2025-08-02T08:21:12.000Z","size":125,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-30T00:00:36.754Z","etag":null,"topics":["css3","google-fonts","html5","mobile-first-workflow","svg-assets","vanilla-js"],"latest_commit_sha":null,"homepage":"https://interactive-pricing-component-xi-fawn.vercel.app","language":"CSS","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-08-01T19:56:35.000Z","updated_at":"2025-09-15T13:29:43.000Z","dependencies_parsed_at":"2025-08-01T22:28:42.403Z","dependency_job_id":null,"html_url":"https://github.com/Ayokanmi-Adejola/Interactive-Pricing-Component","commit_stats":null,"previous_names":["ayokanmi-adejola/interactive-pricing-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ayokanmi-Adejola/Interactive-Pricing-Component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FInteractive-Pricing-Component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FInteractive-Pricing-Component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FInteractive-Pricing-Component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FInteractive-Pricing-Component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayokanmi-Adejola","download_url":"https://codeload.github.com/Ayokanmi-Adejola/Interactive-Pricing-Component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FInteractive-Pricing-Component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002358,"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","svg-assets","vanilla-js"],"created_at":"2025-10-10T00:30:19.263Z","updated_at":"2025-10-10T00:33:03.056Z","avatar_url":"https://github.com/Ayokanmi-Adejola.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interactive Pricing Component\n\nA modern, responsive pricing component built with vanilla HTML, CSS, and JavaScript. This project features an interactive slider for selecting page view tiers and a toggle for monthly/yearly billing with dynamic pricing calculations\n\n![Design preview for the Interactive pricing component](./design/desktop-preview.jpg)\n\n\n## 🎯 Overview\n\nThis interactive pricing component was developed as part of a Frontend Mentor challenge. The component allows users to select different pricing tiers through an interactive slider and toggle between monthly and yearly billing options with automatic discount calculations.\n\n### The Challenge\n\nUsers should be able to:\n\n- ✅ View the optimal layout for the app depending on their device's screen size\n- ✅ See hover states for all interactive elements on the page\n- ✅ Use the slider and toggle to see prices for different page view numbers\n- ✅ Experience smooth animations and transitions\n- ✅ Navigate the component using keyboard controls\n\n## ✨ Features\n\n### Core Functionality\n- **Interactive Slider**: Smooth range slider with 5 pricing tiers\n- **Dynamic Pricing**: Real-time price updates based on selected tier\n- **Billing Toggle**: Switch between monthly and yearly billing\n- **Automatic Discounts**: 25% discount applied for yearly billing\n- **Responsive Design**: Optimized for mobile (375px) and desktop (1440px)\n\n### User Experience\n- **Smooth Animations**: CSS transitions for all interactive elements\n- **Hover Effects**: Visual feedback on all clickable elements\n- **Custom Styling**: Branded slider with custom thumb design\n- **Accessibility**: Keyboard navigation and screen reader support\n\n### Pricing Tiers\n| Page Views | Monthly Price | Yearly Price (25% off) |\n|------------|---------------|------------------------|\n| 10K        | $8.00         | $6.00                  |\n| 50K        | $12.00        | $9.00                  |\n| 100K       | $16.00        | $12.00                 |\n| 500K       | $24.00        | $18.00                 |\n| 1M         | $36.00        | $27.00                 |\n\n## 🛠 Technologies Used\n\n- **HTML5**: Semantic markup structure\n- **CSS3**: Modern styling with Flexbox and custom properties\n- **Vanilla JavaScript**: Interactive functionality and DOM manipulation\n- **Google Fonts**: Manrope font family (600, 800 weights)\n- **SVG Assets**: Scalable icons and background patterns\n\n## 📦 Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/Ayokanmi-Adejola/interactive-pricing-component.git\n   ```\n\n2. **Navigate to project directory**\n   ```bash\n   cd interactive-pricing-component\n   ```\n\n3. **Open in browser**\n   ```bash\n   # Simply open index.html in your preferred browser\n   # Or use a local server for development\n   python -m http.server 8000\n   # Then visit http://localhost:8000\n   ```\n\n## 🎮 Usage\n\n1. **Adjust Pricing Tier**: Use the slider to select different page view amounts\n2. **Toggle Billing Period**: Click the toggle switch to change between monthly and yearly billing\n3. **View Pricing**: Watch as prices update dynamically based on your selections\n4. **Responsive Testing**: Resize your browser to see the mobile-optimized layout\n\n## 📁 Project Structure\n\n```\ninteractive-pricing-component/\n├── index.html              # Main HTML structure\n├── style.css              # Complete styling and responsive design\n├── script.js              # Interactive functionality\n├── README.md              # Project documentation\n├── design/                # Design reference files\n│   ├── desktop-design.jpg\n│   ├── mobile-design.jpg\n│   └── active-states.jpg\n├── images/                # SVG assets and icons\n│   ├── bg-pattern.svg\n│   ├── pattern-circles.svg\n│   ├── icon-check.svg\n│   ├── icon-slider.svg\n│   └── favicon-32x32.png\n└── style-guide.md         # Design system specifications\n```\n\n## 🎨 Design Specifications\n\n### Color Palette\n- **Primary Colors**:\n  - Soft Cyan (Slider Bar): `hsl(174, 77%, 80%)`\n  - Strong Cyan (Slider Background): `hsl(174, 86%, 45%)`\n  - Light Red (Discount Text): `hsl(15, 100%, 70%)`\n  - Pale Blue (CTA Text): `hsl(226, 100%, 87%)`\n\n- **Neutral Colors**:\n  - White (Component Background): `hsl(0, 0%, 100%)`\n  - Very Pale Blue (Main Background): `hsl(230, 100%, 99%)`\n  - Light Grayish Blue (Empty Slider): `hsl(224, 65%, 95%)`\n  - Grayish Blue (Text): `hsl(225, 20%, 60%)`\n  - Dark Desaturated Blue (Text \u0026 CTA): `hsl(227, 35%, 25%)`\n\n### Typography\n- **Font Family**: Manrope\n- **Weights**: 600 (Semi-bold), 800 (Extra-bold)\n- **Base Font Size**: 15px\n\n### Responsive Breakpoints\n- **Mobile**: 375px and up\n- **Desktop**: 768px and up\n\n## 🔧 Development Process\n\n### 1. Planning \u0026 Analysis\n- Analyzed design files and requirements\n- Created component structure and layout plan\n- Identified interactive elements and functionality needs\n\n### 2. HTML Structure\n- Built semantic HTML foundation\n- Implemented proper accessibility attributes\n- Organized content into logical sections\n\n### 3. CSS Styling\n- Applied mobile-first responsive design approach\n- Created custom slider styling with cross-browser compatibility\n- Implemented smooth animations and hover effects\n- Used CSS custom properties for maintainable code\n\n### 4. JavaScript Functionality\n- Developed pricing calculation logic\n- Implemented slider and toggle event handlers\n- Added dynamic content updates\n- Created smooth slider background progress indicator\n\n### 5. Testing \u0026 Optimization\n- Cross-browser compatibility testing\n- Responsive design validation\n- Accessibility testing with keyboard navigation\n- Performance optimization\n\n## 💡 Key Learnings\n\n### Technical Skills Developed\n- **Custom Range Slider Styling**: Learned to create cross-browser compatible custom slider designs\n- **Dynamic Pricing Logic**: Implemented real-time calculations with percentage discounts\n- **CSS Animations**: Created smooth transitions and hover effects for better UX\n- **Responsive Design**: Mastered mobile-first approach with flexible layouts\n\n### Code Highlights\n\n**Custom Slider Styling**:\n```css\n.slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: hsl(174, 86%, 45%);\n  background-image: url('./images/icon-slider.svg');\n  box-shadow: 0 15px 30px rgba(0, 255, 231, 0.6);\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n```\n\n**Dynamic Pricing Calculation**:\n```javascript\nfunction updatePricing() {\n  const sliderValue = parseInt(slider.value);\n  const currentData = pricingData[sliderValue];\n  const isYearly = billingToggle.checked;\n\n  let price = currentData.price;\n  if (isYearly) {\n    price = price * 0.75; // 25% discount\n  }\n\n  priceElement.textContent = `$${price.toFixed(2)}`;\n}\n```\n\n**Progressive Slider Background**:\n```javascript\nfunction updateSliderBackground() {\n  const percentage = (sliderValue / slider.max) * 100;\n  slider.style.background = `linear-gradient(to right,\n    hsl(174, 77%, 80%) ${percentage}%,\n    hsl(224, 65%, 95%) ${percentage}%)`;\n}\n```\n\n## 🚀 Future Enhancements\n\n### Planned Features\n- [ ] **Animation Library Integration**: Add more sophisticated animations\n- [ ] **Theme Switching**: Dark/light mode toggle\n- [ ] **Currency Selection**: Multiple currency options\n- [ ] **Plan Comparison**: Side-by-side plan comparison view\n- [ ] **Analytics Integration**: Usage tracking and insights\n\n### Technical Improvements\n- [ ] **TypeScript Migration**: Add type safety\n- [ ] **CSS-in-JS**: Consider styled-components for better maintainability\n- [ ] **Testing Suite**: Unit and integration tests\n- [ ] **Performance Monitoring**: Core Web Vitals optimization\n- [ ] **PWA Features**: Offline functionality and app-like experience\n\n\n### Development Setup\n1. Fork the repository\n2. Create your 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## 👨‍💻 Author\n\n- Frontend Mentor: [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)\n\n\n## 🙏 Acknowledgments\n\n- **Frontend Mentor** for providing the design challenge and specifications\n- **Google Fonts** for the beautiful Manrope typography\n- **The Frontend Community** for inspiration and best practices\n- **MDN Web Docs** for comprehensive web development documentation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Finteractive-pricing-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayokanmi-adejola%2Finteractive-pricing-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Finteractive-pricing-component/lists"}