All comments

• 

  Rajeev kumar•280

  @beRajeevKumarSubmitted over 2 years ago

  It is interactive rating project. I want to make it more functional but as a beginner this is only i build.So take a look and help me to make my code more efficient and make it more functional.

  

  Interactive Rating

  1

  60
  

  Davina Leong•440

  @davinaleongPosted over 2 years ago

  Hi, instead of buttons, I suggest using radio buttons since they already have the ability to deselect the other choices when one choice is selected when they share the same name attribute.

  Link the radio buttons to the labels via the for attribute. Hide the radio buttons and style the labels.

  To style checked labels, you can to this:

  input[type=radio]:checked + label { ... }

  This will select the label immediately after the radio input.

  ---

  For toggling the different views, I prefer to use data attributes as opposed to classes.

  E.g. HTML: <section class="thanks" data-open>...</section>

  Then you select the element like this in CSS:

  .thank-you-section {
    display: none;
  }
  
  .thank-you-section[data-open] {
    display: block;
  }
  

  Then in your JavaScript, you can do this: thanks.setAttribute("data-open", true);

  Marked as helpful

  1
• 

  P K•20

  @pranavkoiralaSubmitted over 2 years ago

  is @media only screen and (max-width: ...px) {} best practice for handling smaller size screens or is there another way?

  

  Advice Generator

  2

  50
  

  Davina Leong•440

  @davinaleongPosted over 2 years ago

  Instead of media queries, you can try clamp().

  Syntax: clamp(<min value>, <ideal value>, <max value>);

  You can mix units too!

  Documentation

  Kevin Powell explains clamp pretty well in this video.

  0