Interactive rating component using React (CRA), TypeScript & CSS3

Community feedback

• 

  Santiago Moraga Caldera•710

  @Remy349Posted 12 months ago

  Congratulations, it is an incredible result. Just a couple of recommendations for you to consider:

  • Modify a couple of styles in the css, in the responsive design for phones comes a point where it does not adapt very well, this is because of the min-width: 420px you have in the body, remove it :)

  • There are many ways to center an element, one of them is the following and consider using in your <main class="page"> tag:

  /* USING FLEX */
  
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  /* USING GRID */
  .page {
    display: grid;
    place-content: center;
    min-height: 100vh;
  }
  

  I recommend that you use min-height instead of just height.

  • In your react code I reviewed it and it is very well done, although there are many things you can improve, such as creating a component for the thank you card, separate from the component you have in the card component.

  I hope this will help you to continue improving your learning.

  Keep it up :)

  Marked as helpful

  0

  ---

  

  Mrs. Zwickermann•30

  @azwickPosted 12 months ago

  @Remy349 Thank you so much for your review!! I appreciate it! I made some CSS changes based on your comment and your solution to this challenge. I really like your way of solving this task, by the way. :)

  You are also right about the separate component topic ("welcome" view & "thank you" view), I struggled a bit with how to divide the components. I'm going to leave it as it is for now, but I'll pay more attention to this topic in the future.

  Thanks again :)

  0