Interactive Rating Card

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  Hi, @Fahatmah. How are you?

  • You should've used interactive elements like <button> or <input type="radio"> for the ratings, instead of divs. <div> are used to wrap elements when we don't have a semantic element available. Here we are selecting a specific rating from a choice of 5.

  <ul>
      <li><input type="radio" name="rating" value="1">1</li>
      <li><input type="radio" name="rating" value="2">2</li>
  </ul>
  

  Check out this little demo i wrote to show how you could've written the markup for rating. https://codepen.io/pradeeps4ini/pen/OJvZGev

  Marked as helpful

  1

  ---

  

  Fat•910

  @FahatmahPosted over 2 years ago

  @pradeeps4ini thank you for the feedback. I tried input radio types but for some reason I used div haha I forgot what is it about but yeah kinda work atleast. Thank you again and I will soon fix and add some things on it.

  0
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Fahatmah, well done working on this! JS is really not easy when starting out, but I think you'll get there eventually! You got a good start with your code; you just need to add in a few more lines for what happens when a new button is pressed and how to remove the "selected" style from the previous button. Right now when I click on a new button, the old button still has the old style, and if I click all of them, they'll all stay orange. I just wrote a comment on someone else's solution with an example of my old code, which you can check out here. Good job once again!

  Marked as helpful

  1

  ---

  

  Fat•910

  @FahatmahPosted over 2 years ago

  @elaineleung

  Thank You Very Much for the feedback and for the link. So happy!

  1