Skip to content
Submitted almost 3 years ago

Responsive toggle component with only CSS and HTML

accessibility
Elaine•11,360
@elaineleung
A solution to the Pricing component with toggle challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I took on the extra bonus challenge of wiring everything up without Javascript, and this needed some creative ways to solve the problem of keeping the inputs as siblings to the plan/card elements so that the price information can be changed. This means I can't have the radio inputs nested at all in any containers. I also didn't want to resort to using a checkbox after reading Sara Soueidan's post on building accessible/inclusive toggle switches. Lastly, I wanted to make sure there's some transition between the values so that it's obvious to the user that something is different; even though I could reuse my code from the previous challenge, this also took some time to figure out. I think everything looks and works fine, and hopefully the semantic HTML won't cause issues, but I prefer using Javascript in the future.

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    👾Hello Elaine, congratulations for your new PIXEL PERFECT solution!

    Every time you post something I feel bad because I never reach a pixel perfect solution!

    This is something really beautiful to see when scroll the slider and see the two images matching!

    Everything is so responsive and nice to see when you scale down the window, how the text scales and the cards change the layout that I've nothing to say. Its already done I guess. Congrats! 🤘

    👋 Happy coding!

  • CyrusKabir•1,885
    @CyrusKabir

    Hello Elain, you did a good and clean job on this challenge as always. really good. I just want to know why you don't use some good features in sass when you are using sass. I mean using some loops for generating custom props or utility classes or some @mixins and placeholders.

  • Pretty Kunene•690
    @nonoza

    Hi @elaineleung , great job!! You are always an inspiration to me. I love that the structure of your code and it readable . :) .

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