Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pricing Component With Toggle And CSS Animations

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (1)
error

This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.

<button class="toggle-switch__btn" id="toggle-switch" aria-pressed="true">
            <div class="toggle...</button>

ApplePieGiraffe’s questions for the community

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

phil0452β€’ 160

@phil0452

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@phil0452

Thanks for the feedback, phil! 😊

0

Sourabh Singhβ€’ 165

@6ixline

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!