Skip to content
Submitted about 2 years ago

Interactive review vite+vue+ts

Víctor Andrés Hurtado Gutiérrez•340
@vianhg
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How would you split the page into Components? This is my "hierarchy"

Main:
  |-  RatingCard
      |-  Star image
      |-  Card title
      |-  Card body
          |- Text
          |- RatingNumberComponents
             |- five RatingNumberComponent (radio button)
          |- Submit button
      |- ThankComponent
        |- Header
          |- img
          |- badge (message you selected 4 out of 5)
        |- Body
          |- title
          |- description

Community feedback

  • Jairo Valderrama•420
    @jairovgPosted over 1 year ago

    Hi @vianhg, congrats on your solution; here are some comments that might help you to improve it:

    Accessibility and semantics

    • Think about if the star image adds some meaning to your content, if not, then it should be considered as a decorative image and its alt attribute should be removed.
    • Same comment for the thanks image.
    • You may wrap all your input and button elements in a form one.
    • The rating elements are not reachable using the keyboard.

    Styles

    • You're misleading some BEM concepts, I've seen some modifiers in your code when they should be elements instead. i.e.: card--body should be card__body.
    • The submit button misses a pointer cursor, this injects an a11y issue.

    Regarding your questions/doubts

    • The components structure is correct but, try to refactor it a bit. Take a look at the structure you have for the RatingCard and ThankComponent; they are sharing the same structure, as both are a Card, so think about how using a single reusable component you may achieve the same result.

    I hope you find it useful. I'm happy to take another look at your solution if you make some other changes.

    Marked as helpful
    1

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