Interactive rating component with basic JS

Community feedback

• 

  Yokke•620

  @JexintePosted over 2 years ago

  Hey Good job,

  I'm beginner too so I'm just gonna say to you what you could improve on your solution and if there is any other things that I haven't notice I'm sure someone will notice you, so :

  • I think you could use less div for more semantics tag an example on your buttons you could use radio input they are more meaningful because you are suppose to allow the user to select just one rating not all of them and it's more easier to check if one of your radio button is selected then you can pop up your thank card with the right value on the thanks paragraph.

  • I see that your submit button have no checking on this challenge it's not a big deal but imagine if you have a bigger site and no verification before sending information who know what's gonna happend : ) So it's just a recommandation there is no obligation but you can use this method e.preventdefault() it will block the default behavior of the submit button allowing you to check which button have been selected then pop up your thanks card !

  More details here : https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

  • I think but perhaps I'm wrong but the condition that you've wrote for styling all buttons on orange is not necessary I repeat it it's just my understanding of the challenge but I think that the button from 1 to 4 is only on grey color when you select them and the last one is on orange.

  So on you button from 1 to 4 you could give them a class and go on your css file and write something like that :

  classname:focus { background-color : yourcolor; }

  Then each button having the classname when selected is gonna get the background-color that you have set. I check right now it seems on div the property is not working.

  In hope it helps you !

  1

  ---

  

  Dan Kant•310

  @Dan-KantPosted over 2 years ago

  @Jexinte Thanks very much. You're a savior. I'll try to apply all your sugfestions to my code.

  1

  

  Yokke•620

  @JexintePosted over 2 years ago

  @Dan-Kant You're welcome :)

  0