Skip to content
Submitted about 4 years ago

Pricing Component With Toggle And CSS Animations

ApplePieGiraffe•30,545
@ApplePieGiraffe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pricing component with toggle
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hey, everybody! 👋

This was another fun challenge that I quite enjoyed! 😊

I focused on trying to make my class names understandable and organized and I tried to increase the accessibility of the toggle by sandwiching it between two labels and adding the aria-pressed attribute to it (but IDK if that really helps or just makes things slightly more confusing)! 🙃

I also added a cool little sliding animation to the left and right pricing cards in the desktop layout. 😎

Feedback is welcome and appreciated!

Happy coding! 😁

Community feedback

  • Account deleted

    Apple, I love the sliding animation when responding to a desktop screen.

    The container for the price plans. I'd suggest giving this a max width and/or switch to mobile view for the plans, considering their width. Shrinking the browser from desktop to tablet screen, the price plans end up touching the ends of the browser window.

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    @phil0452

    Thanks for the feedback, phil! 😊

    0
  • Sourabh Singh•165
    @6ixlinePosted about 4 years ago

    Hey there 👋,

    As always your solution is really great 👌.

    I just suggest one thing though:

    • You should add this .toggle-switch__btn{ outline: none; } on the toggle button for the outline that comes whenever it toggle.

    Hope it's helpful!! Happy coding 😄

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    @Devsourabh

    Thanks for the feedback, Devsourabh!

    I think I'd actually like to keep the outline on the toggle for accessibility reasons. It's useful for when users click the "Tab" button to move around the page (rather than using a mouse to point and click) because it shows which control is highlighted. But perhaps I could consider another slightly cooler :focus state!

    Thanks again! 😁

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord