Interactive Feedback Panel

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @gmqrk247, Congratulations on completing this challenge!

  I saw your solution preview site and I think it's already really good. Here’s some tips for you to improve it:

  To improve the card overall responsibility, you can start to add flex-wrap inside the class that manage the section for the rating numbers button and make the adjust to fit in different rows while the container scales down, not that without this property the container doesn't shrink. Here's the code applying these changes:

  .score-container {
      flex-wrap: wrap;
      display: flex;
      justify-content: space-between;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi @gmqrk247, well done here, and no worries about being at kindergarten level because we've all been there! Your solution works well, and everything is functional, so that's a great start already!

  Some suggestions I have for you:

  1. Since the buttons are performing an action (namely recording the score and being interactive), it's best to use button instead of div, as div doesn't have semantic HTML properties, and generally for HTML if there's a more suitable element for the task, you'd always want to go with that element first instead of using a div.

  2. Instead of having a set score given to the user when the app loads, I suggest having an empty state. For something like this where you want the user to give a rating, it's just a better user experience when they don't feel like they're being forced to choose the best rating. If you use a empty state, you'd always want to write an if statement to handle what happens if no score is selected but the submit button is pressed.

  If you need some ideas, have a look at my CodePen here, which is a mini version of this challenge: https://codepen.io/elaineleung/pen/RwMqMxZ

  Hope some of this can help you, and you're doing great with the JS, so keep going 😊

  Marked as helpful

  0

  ---

  

  gmqrk247•90

  @gmqrk247Posted about 2 years ago

  Hey, @elaineleung! Thanks for the feedback! I was wondering whether to have a pre-selected value or not, but it is indeed true, for a better user experience, forms should not have a pre-selected value to push the user in a favorable direction. I removed that set and changed the divs to buttons. I was totally lost how I should create that element. I tried select list, radiobuttons and whatnot tbh 😅

  0