Skip to content
Submitted over 1 year ago

Pricing Component with Toggle [Vanilla JS] + SASS + Mobile First

accessibility, sass/scss, bem
Aakash Verma•9,500
@skyv26
A solution to the Pricing component with toggle challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi! Really good and easy challenge, I tried to make it pixel perfect but I am happy with final output and I would like to get feedback, suggestion for any kind of improvement. Even I made it accessible. Let me know what you think

Code

Please log in to post a comment

Log in

Community feedback

  • Faris P•2,810
    @FarisPalayi

    Nicely done 👌

    In addition to what @minimalsm said, my suggestion would be to make the toggle button accessible for keyboard users. Because, currently, the toggle button is not focusable.

    For that, instead of using dispaly: none; to hide the checkbox from the screen, I'd suggest using something like opacity: 0; height: 1px; width: 1px; (like an .sr-only class). So that the checkbox is still there in the DOM, but users won't be able to see it. Then you can simply add the focus styles when the checkbox is focused. For eg: .checkbox:focus ~ .toggle-btn { outline: solid 2px white; }. You might need to change your markup a bit for this to work, though.

    Hope it's all understandable :)

    Marked as helpful
  • Joshua•25
    @minimalsm

    Hey @skyv26, this looks great 😀

    A few things I'd change

      1. Your whites are getting washed out by the background-color (#F6F6FD). I think the design calls for using pure white (#FFF).
      1. You have some inconsistent spacing in your markup (e.g. double space here: <article class="article article-2">) which could use cleaning up.
      1. The toggle button's circle should be larger to match the design.
    Marked as helpful
  • Tomi•565
    @Tomi-pter

    Looks good. You forgot to add the hover states for the buttons and the toggle button.

    As for making the toggle button work with the keyboard I used the onkeyup event listener and e.key === 'Enter' to enable that functionality.

    Hope this helps 👍🏾

    Marked as helpful
  • Account deleted

    Nice job!

    Marked as helpful
  • Anosha Ahmed•9,300
    @anoshaahmed

    You did really good. For box shadow you did: 0 10px 10px -1px rgb(109 112 141 / 10%) but i think if you change the last value to -1px, it would be a bit closer to what the design is. like box-shadow: 0 10px 10px -1px rgb(109 112 141 / 10%)

    Marked as helpful

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