Skip to content
Submitted about 4 years ago

Accessible toggle in HTML, CSS and JS with explanatory notes

Grace•31,270
@grace-snow
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

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
    @ApplePieGiraffePosted about 4 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! 😁

    1
    Grace•31,270
    @grace-snowPosted about 4 years ago

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

    0
  • Rabah•380
    @rabahmilanoPosted over 3 years ago

    well done!

    0
  • Whitegod Kingsley•450
    @iamwhitegodPosted almost 4 years ago

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

    0
    Grace•31,270
    @grace-snowPosted almost 4 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

    0
  • 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.

    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