interactive rating component

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello @Barsheyr, Congratulations on completing this challenge!

  Two tips for you:

  Fix the alignment. The best way make this alignment is by using FLEXBOX. The first step, is to add min-height: 100vh to make the body height size becomes 100% of the viewport height, this way you make sure the container will be aligned vertically since the body will display ever 100% of the screen height. After that add two flex properties to make the alignment display: flex / align-items: center; / justify-content: center;. If you're using the attribution you need to add flex-direction: column to make the attribution stays under the QR Code component. See the code below:

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

  .font-medium { display: flex; font-weight: 500; flex-wrap: wrap; }

  .font-medium {
      display: flex;
      font-weight: 500;
      flex-wrap: wrap;
  }
  
  

  ✌️ I hope this helps you and happy coding!

  01

  Marked as helpful
• 

  Hyron•5,870

  @hyrongennike

  Posted almost 3 years ago

  Hi @Barsheyr,

  Congrats on completing the challenge

  Just a suggestion, instead of giving 0 when no rating is selected I would suggest just disable the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked.

  Hope this is helpful.

  01

  Marked as helpful