All comments

• 

  Rajeev kumar•280

  @beRajeevKumar

  Submitted almost 3 years ago

  

  Interactive Rating

  1

  60
  

  Davina Leong•440

  @davinaleong

  Posted almost 3 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);

  1

  Marked as helpful
• 

  P K•20

  @pranavkoirala

  Submitted almost 3 years ago

  

  Advice Generator

  2

  50
  

  Davina Leong•440

  @davinaleong

  Posted almost 3 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