Interactive Rating Component

Community feedback

• 

  fersrm•230

  @fersrm

  Posted over 2 years ago

  hola el problema que veo es que, aunque mande el valor del último botón igual puede marcar todos los bonotes quedando activados podrías recorrer los demás botones si marca uno nuevo y desactivarlos, aunque la opción más fácil que yo encuentro es usar input type radio así automatíceme de desactivan si presiona otro y podrías obligar al usuario a que marque una opción

  10

  Marked as helpful
• 

  Kyrylo Haiduk•420

  @superpooperxxx

  Posted over 2 years ago

  Hi, good job on this🔥

  I highly recommend trying to make as similar to design as possible.

  • I recommend moving icons to css and use background-image. Shortly, <img> is for actual content that has actual meaning, background-image for non-content images, like star here. Read more here

  <img src="./icon-star.svg" alt="star-icon">

  • There is a much better way to style rating buttons ⬇️

  .button-ratings{
     width: 100%;
     display: flex;
     justify-content: space-between;
  
     padding: **pixel values**;
  }
  
  .btn1{
      background-color: hsl(210, 5%, 17%);
      color: hsl(217, 12%, 63%);
      border-radius: 100%;
      text-align: center;
      margin-right: 15px;
      border: none;
      width: 35px;
  }
  

  Happy coding❤️ Hope this was helpful

  10

  Marked as helpful