interactive-rating-component--css-html-js

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • To properly center your content to your page, you will want to add the following to your Body element (this method uses CSS Grid):

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  More Info:📚

  Centering in CSS

  • The “icons/illustrations” in this component serve no other purpose than to be decorative; They add no value. There alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  -The proper way to build this challenge is to create a form and inside of it, the “rating buttons” should be built using an input radio (wrap all of them inside a fieldset), since this will prevent additional buttons from being active at the same time, and it should have a label element attached to it for accessibility.

  More Info:📚

  MDN <input type="radio">

  MDN <fieldset>: The Field Set element

  • • Your ratings should have an active state to let users know which rating they have chosen.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  1
• 

  wannacode•720

  @kwngptrlPosted almost 2 years ago

  Very nice. Although, if the user did not choose anything from 1 to 5, but pressed submit, there should be an alert or message that user should choose a number.

  To center the card, you can use display:grid, place-content:center. More info here: https://www.youtube.com/watch?v=vNwoDkn7AIc

  1
• 

  David Adenusi•370

  @Davidmide02Posted almost 2 years ago

  Yeah

  You can also use flex , set the direction to column (depending on the layout) and you just use text-alight.

  1