Interactive Rating (HTML, CSS, JS)

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted over 2 years ago

  Hey there, congrats on your solution! Design looks good and is responsive. You have clean usage of ES6 I like it :) You can optimize the code by using focus CSS selector and a little change on JS logic:

  .ratingButtonInactive:focus {
      color: white;
      background-color: #FC7614;
  }
  /* You won't need active class in this case */
  

  ...
  
  const ratingClicked = event => {
      document.querySelector("#ratingSelected").innerHTML = event.target.innerHTML;
  }
  
  /* isAnyButtonSelected() isn't needed */
  
  const submitClicked = () => {
      if (document.querySelector("#ratingSelected").innerHTML) {
          document.querySelector("#rateUsRequest").hidden = true;
          document.querySelector("#ratingFeedback").hidden = false;
      }
  }
  
  ...
  

  These should be enough to refactor. Happy coding!

  Marked as helpful

  1

  ---

  

  Michael Waaler•230

  @10highPosted over 2 years ago

  @ErayBarslan Thanks! I'll check that out!

  I appreciate you taking the time :)

  1