Responsive interactive rating page using HTML, CSS amd pure JavaScript

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Matheus Saggiorato, Congratulations on completing this challenge!

  Here's two tips for you:

  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:

  .buttons-group {
      justify-content: center;
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
  }
  

  Fix the alignment of the whole content using flex and min-height to manage the vertical alignment and make everything centered.First of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  body {
      min-height: 100vh;
      background-color: hsl(216, 12%, 8%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Matheus Saggiorato da Silva•20

  @MatheusSaggioratoPosted about 2 years ago

  Olá @correlucas. Excelente melhoria com o flex-wrap, ficou muito mais responsivo, agradeço muito!

  1
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @MatheusSaggiorato,

  Nice job on the challenge

  You can add the following or make changes to your CSS rules it just to position the card in the middle of the page.

  body {
      background-color: hsl(216, 12%, 8%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  
  #container {
      margin: 0 0 2rem;
  }
  

  I would suggest removing any browser alert boxes it's bad for user experience, you can add the disabled attribute to the button and when a rating is selected remove the attribute it implies the same thing to the user that a rating needs to be selected.

  Hope this is helpful.

  Marked as helpful

  0

  ---

  

  Matheus Saggiorato da Silva•20

  @MatheusSaggioratoPosted about 2 years ago

  Hi @hyrongennike. Thank you very much for the suggestions for improvement, I will increase them in my project.

  0