Submitted over 3 years ago

Accessible toggle in HTML, CSS and JS with explanatory notes

Grace• 27,630

@grace-snow

Preview site View code

This is a solution for...

Pricing component with toggle

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Using accessible component from: https://github.com/scottaohara/a11y_styled_form_controls

This repo should provide explanatory notes on how and why the toggle was built like that.

Includes:

fully accessible toggle switch
javascript to toggle a class to show/hide the correct prices
responsive (clamped) font sizes
mobile first design

Ideally, this sort of component should read dynamic data and insert the prices in rather than hard-coding in HTML. But I don't have time for all that today!

Let me know if anything's broken :)

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, Grace! 👋

Very nice job on this challenge! Everything looks great! 👍

Perhaps a tiny detail you might like to add is a pointer cursor upon hover to the toggle—but I can see it already has a subtle hover state, so it might be good as it is!

Happy coding! 😁

Grace• 27,630

@grace-snow

Posted over 3 years ago

@ApplePieGiraffe yeah, good shout! I can add that :)

Rabah• 380

@rabahmilano

Posted almost 3 years ago

well done!

Whitegod Kingsley• 450

@iamwhitegod

Posted over 3 years ago

Liked how you made use of comments in your style.scss file.

Grace• 27,630

@grace-snow

Posted over 3 years ago

@whitegod001 thanks, I wouldn't do that in production, but find it's helpful to explain my thought process in these challenges to hopefully help other people or get feedback when I go wrong

Account Deleted

Hey Grace, Thanks for the comments--super helpful! I like the method with the hidden information for better accessibility, will try this, too.

Please log in to post a comment

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