Interactive rating component

Community feedback

• 

  Phuong•290

  @pengpongpongPosted almost 2 years ago

  Hey Manannan297!

  Nice animation you added for your cards!

  In SCSS you don't have to define variables the same way like CSS. You only need "$" dollar sign and you don't need to put it in :root selector like CSS.

  $color-orange: hsl(25, 97%, 53%);
  background-color: $color-orange;
  

  You can also wrap sizes for media queries in variables like so:

  $desktop: 1000px;
  @media (min-width: $desktop) {
  }
  

  You wrapped your inputs in divs, but you should use fieldset tag like so:

  <form id="rating_form">
            <fieldset>            
              <input type="radio" name="rating_number" id="1" value="1">
              <label for="1">1</label>
    
              <input type="radio" name="rating_number" id="2" value="2">
              <label for="2">2</label>
          
              <input type="radio" name="rating_number" id="3" value="3">
              <label for="3">3</label>
            </fieldset>
  </form>
  

  The fieldset tag ensures that you can only select one radio input at the same time and groups related elements in a form. It's also more semantic.

  I hope it helps and don't hesitate to ask!

  0