Skip to content
Submitted over 1 year ago

Interactive rating component

Omer Ben Yosef•30
@omerby12
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

Hello everyone! This is my solution for interactive-rating-component challenge.

I have used React.js for this project, I built two components, one for the form itself, and the other one for the thank you state (one before the submission,one for the "Thank you" Message).

For this purpose, I have used useState in addition to passing props from parent to child, I have used ChatGPT for bugs during the development and ideas on how to implement the project.

Any feedback is appreciated :-)

Community feedback

  • hamza•390
    @HamzaouladevPosted over 1 year ago

    hello @comebackist, heres some feedback on the layout that you may fin interesting..

    you dont have to repeat max-width in multiple places, you can give your component a relative width and a fixed max-width without repeating the code in a media query:

    .card {
   width: 90%;
   max-width: 41.2rem;
}

    -when you gave the body a display of flex and flex-direction: center;, you flipped the flex axis so the code which does the vertical centering is justify-content: center; so you should remove the align-content property because it will break your layout in this case, because the height is relative, use margin: 0 auto; instead.

    -my suggesting for the buttons is to give their parent a flex-wrap: wrap; and a gap: 1rem; so the children can have more room and maintain their dimensions in small screens

    i hope you found my feedback helpful, keep hacking!

    Marked as helpful
    0

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