Interactive rating component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Andrew, congratulations for your great solution!

  ✔My rating for this solution: ⭐⭐⭐⭐⭐

  Great solution and great design! The card is already responsive, but something that you need to do to make it more flexible is to work in the rating button numbers, applying flex-wrap: wrap will make it adjust with the card with, note that currently the container stop to shrink due the lack of this property:

  .card .radio-group {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Andrew G. Ayad•100

  @andrew-g-ayadPosted about 2 years ago

  @correlucas I really appreciate your reaching out and your valuable feedback. And I feel like I need to do what you mentioned to make it more responsive, but yet I'm not getting what I should do. maybe if you explain the problem in more detail will help me a lot.

  Thank you in advance.

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @andrew-g-ayad I've checked your solution and now the button with the numbers are getting in different row and before it wasnt. If this is not flexible they stay in the same row and don't make the component shrink.,

  1
• 

  CharlieeLuna•260

  @CharlieeLuna23Posted about 2 years ago

  Everything looks good, nice job!

  If I'm allowed to add a little feedback, I'm noticing that you added an ID to each button and created a variable for each one to later make an array with all those variables. An easier and cleaner, in my opinion, way to do this is to add a class to all the buttons and then you can use something like: const btnsArray = document.querySelectorAll('.the-classname-you-chose'); This will give you an array with all the items that share that class, in this case, your buttons.

  Hope this helps!

  Marked as helpful

  1
• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi Andrew,

  Congratulations 🎉 for completing this challenge, it was a great attempt. I found some issues I want to address:

  1. In mobile screen, I noticed that the card touches the side of the screen so I would suggest you to use the max-width property and then add a padding property within the body with a value of 0 10px.
  2. Instead of using the margin-top property, you could use the flex property within the body e.g.

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  

  Overall, great attempt and wish you the best for your future projects so keep coding 👍.

  Marked as helpful

  1

  ---

  

  Andrew G. Ayad•100

  @andrew-g-ayadPosted about 2 years ago

  @romila2003 Yes, I know this is the right way to center the card. just forgot to fix it before submitting the challenge. Thank you for reminding me. You also reminded me of how to make it fit on mobile screens. which was really helpful 👍

  I'll fix these right away 👍.

  Thank you

  1