{"id":24178816,"url":"https://github.com/mayen007/pricing-component-with-toggle","last_synced_at":"2026-05-12T10:31:43.585Z","repository":{"id":271223436,"uuid":"912670664","full_name":"Mayen007/pricing-component-with-toggle","owner":"Mayen007","description":"An interactive pricing component with a toggle to switch between monthly and annual billing, optimized for accessibility and responsive design.","archived":false,"fork":false,"pushed_at":"2025-01-06T10:56:01.000Z","size":775,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T18:16:19.019Z","etag":null,"topics":["front-end-development","frontend-mentor-challenge","frontend-mentor-solutions","html-css-javascript","intermediate-projects"],"latest_commit_sha":null,"homepage":"https://mayen007.github.io/pricing-component-with-toggle/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mayen007.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-01-06T06:38:53.000Z","updated_at":"2025-01-06T10:59:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"37f0eec8-d642-4565-9160-8b39778c5833","html_url":"https://github.com/Mayen007/pricing-component-with-toggle","commit_stats":null,"previous_names":["mayen007/pricing-component-with-toggle"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mayen007/pricing-component-with-toggle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mayen007%2Fpricing-component-with-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mayen007%2Fpricing-component-with-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mayen007%2Fpricing-component-with-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mayen007%2Fpricing-component-with-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mayen007","download_url":"https://codeload.github.com/Mayen007/pricing-component-with-toggle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mayen007%2Fpricing-component-with-toggle/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32934458,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-12T09:19:52.626Z","status":"ssl_error","status_checked_at":"2026-05-12T09:17:33.438Z","response_time":102,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["front-end-development","frontend-mentor-challenge","frontend-mentor-solutions","html-css-javascript","intermediate-projects"],"created_at":"2025-01-13T05:13:49.559Z","updated_at":"2026-05-12T10:31:43.580Z","avatar_url":"https://github.com/Mayen007.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Pricing Component with Toggle Solution\n\nThis is a solution to the [Pricing component with toggle challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/pricing-component-with-toggle-8vPwRMIC). Frontend Mentor challenges help you improve your coding skills by building realistic projects.\n\n## Table of Contents\n\n- [Overview](#overview)\n  - [The Challenge](#the-challenge)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My Process](#my-process)\n  - [Built With](#built-with)\n  - [What I Learned](#what-i-learned)\n  - [Continued Development](#continued-development)\n  - [Useful Resources](#useful-resources)\n- [Author](#author)\n\n---\n\n## Overview\n\n### The Challenge\n\nUsers should be able to:\n\n- View the optimal layout for the component depending on their device's screen size.\n- Control the toggle with both their mouse/trackpad and keyboard.\n- **Bonus**: Complete the challenge using just HTML and CSS (optional).\n\n### Screenshot\n\n![Pricing Component Screenshot](./assets/images/desktop-view.png)\n\nThis screenshot shows the final solution with both monthly and annual pricing states.\n\n### Links\n\n- **Solution URL**: [View my solution](#)\n- **Live Site URL**: [Visit live site](#)\n\n---\n\n## My Process\n\n### Built With\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- CSS Grid\n- JavaScript for toggle functionality\n- Mobile-first workflow\n\n### What I Learned\n\nWhile building this project, I refined my skills in:\n\n1. **Responsive Design**:\n\n   - Using CSS Grid and Flexbox to create a layout that adapts well across different screen sizes.\n\n2. **Accessible Toggle Design**:\n   - Implemented a toggle with support for both mouse and keyboard interactions.\n   - Added `aria-checked` for better screen reader support.\n\nHere's a code snippet demonstrating the toggle functionality:\n\n```javascript\nconst toggle = document.getElementById(\"pricing-toggle\");\ntoggle.addEventListener(\"change\", function () {\n  const isMonthly = this.checked;\n  document.getElementById(\"basic-price\").textContent = isMonthly\n    ? \"$19.99\"\n    : \"$199.99\";\n});\n```\n\n3. **CSS Variables**:\n   - Leveraged CSS variables for consistent theming across the component.\n\n```css\n:root {\n  --neutral-very-light-grayish-blue: hsl(240, 78%, 98%);\n  --neutral-light-grayish-blue: hsl(234, 14%, 74%);\n}\n```\n\n### Continued Development\n\nIn future projects, I aim to:\n\n- Explore more advanced accessibility techniques to ensure all users can navigate my solutions effortlessly.\n- Focus on improving performance by optimizing CSS and JavaScript.\n- Incorporate modern front-end libraries like React for more dynamic components.\n\n### Useful Resources\n\n- [MDN Web Docs](https://developer.mozilla.org/) - Comprehensive resource for web development.\n- [The Markdown Guide](https://www.markdownguide.org/) - Helped structure this README effectively.\n- [Frontend Mentor Community](https://www.frontendmentor.io/) - A great place to get feedback and learn from others.\n\n---\n\n## Author\n\n- Frontend Mentor - [@Mayen007](https://www.frontendmentor.io/profile/Mayen007)\n- GitHub - [Mayen007](https://github.com/Mayen007)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayen007%2Fpricing-component-with-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmayen007%2Fpricing-component-with-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayen007%2Fpricing-component-with-toggle/lists"}