Pricing component with toggle with SASS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, Amirhossein! 👋

  I recommend using radio inputs for the toggle button since both labels are visible.

  Now, the toggle has no accessible name. Wrapping the checkbox with a <label> element does not add make it labeled. You should provide text content.

  Also, the users should be able to toggle the price by clicking "Annually" and "Monthly". So, those texts should be the label of the toggle button.

  Don't use heading for those texts as well. Headings are used to structure the content of the page.

  Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, they can get confused.

  Dive deeper — How-to: Accessible heading structure - The A11Y Project

  You should make the package names—Basic, Professional, and Master—<h2>. The prices should be wrapped by <p> elements.

  In your CSS, I notice this selector main .cards-container .card-2 .card-btn while that only needs to be .card-btn. Only nesting when you want to style pseudo-elements, pseudo-classes (:hover, :focus, etc), and @media queries. This way, it can help you produce low specificity CSS.

  For the price data, I recommend creating each type of price as an object. You should not use comments to clarify what your code does.

  const data = [
    { annually: { base: 199.99, professional: 249.99, master: 399.99 } },
    { monthly: {  base: 19.99, professional: 24.99, master: 39.99 } }
  ]
  

  I hope this helps. Happy coding! 😄

  Marked as helpful

  0