Interactive Rating Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi @PreciousOritsedere, congrats on completing this challenge!

  You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code to improve the html markup/semantic:

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  PRECIOUS ORITSEDERE•120

  @PreciousOritsederePosted about 2 years ago

  @correlucas wow this is so insightful. Thank you

  0
• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Hello PRECIOUS ORITSEDERE, how are you?

  I really liked the result of your project, but I have some tips that I think you will like:

  1- Page must contain a level 1 header, you could have changed h2 to h1 click here

  2- Document should have one main landmark, you could have put all the content inside the main tag click here

  I noticed that the page content was not centered, so we can do the following:

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

  The rest is great!

  Hope it helps...👍

  Marked as helpful

  0
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Precious, great job building this on React! It looks pretty functional to me, and I like that you had the button disabled until a score is selected, so well done!

  About using button inputs, were you not able to get this working with just <button>? I'd be curious to know because the button element also has the value attribute available, and onclick is also an attribute that can be used.

  In any case, you can try centering the component like this:

  .App, .thanksMsg p {
  	text-align: center;
  	min-height: 100vh;
  	display: flex;
  	align-items: center;
  }
  

  Well done on the whole

  Marked as helpful

  0

  ---

  

  PRECIOUS ORITSEDERE•120

  @PreciousOritsederePosted about 2 years ago

  @elaineleung I could use just <button> But that would mean I have to use .map() to map through the array of numbers but I felt that was sort of a long and tougher process so I tried to figure out another way to pass the rating numbers into the second card to tell what number was picked as the rate. So i did a little research on the easiest and quickest way to achieve this and I figured props would work fine. And to pass a prop I needed to pick the numbers as the value hence why I used the input field.

  Thanks for your help. I’ll work on centering the card now.

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @PreciousOritsedere,

  Congrats on completing the challenge

  You can add the following to center the card.

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

  Marked as helpful

  0

  ---

  

  PRECIOUS ORITSEDERE•120

  @PreciousOritsederePosted about 2 years ago

  @hyrongennike thank you… this is very helpful

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @PreciousOritsedere no problem🙌

  Marked as helpful

  0