Rating component with pure HTML, CSS, JAVASCRIPT

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 2 years ago

  Hi

  A few essential changes are needed in the css on this as it's currently inaccessible to many (including me)

  1. Font size must NEVER be in px. Use rem
  2. Similar with line height but that needs to be unitless like 1.5 (and letter spacing, which should be in em ). Never use px for these as they need to scale with the text.
  3. You should not have a width or height on the card. Only a max-width (preferably in rem). Never limit the height of elements that have text content inside. The browser is smart, let it choose how tall those elements need to be
  4. 10px (even once converted to rem) is unreadably small. The style guide even tells you what the body font size is - that will be the same for a paragraph
  5. You should have aria live high up in the DOM on this page or on an extra div wrapping the thank you content so the browser and assistive tech knows to watch for content changes (screenreaders will be told when the form changes to the thank you and read out the new content)

  These are all super important

  Marked as helpful

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 2 years ago

  In the JS you're making this more complicated than it needs to be

  All you should be listening for is a form submit. You can get the chosen rating from the form.options.value. There is no need to loop over the radios

  Other general points

  • don't change inline styles with js. Let css handle all styling. Use js on this only to get the rating and toggle classes or attributes
  • use const or let. There is no reason to use var in modern js development

  Marked as helpful

  1