Interactive Rating Component 👻

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 2 years ago

  Hey there, バレンタイン 😈! 👋

  Amazing job on this challenge! 👏 The card component looks great and works well and I really like the extra touches you added to your solution! 🙌 The custom design you came up with looks very nice, too! 👍

  The only very tiny suggestion I have for you is to add a favicon to your site. 😜

  Of course, keep coding (and happy coding, too)! 😁

  3

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @ApplePieGiraffe

  Thank you so much for the compliments! 😊

  DEFINITELY! 😄 I’ve been wanting to get a custom one for a while now. But I’ve been constantly pushing it to the back. I’ll have to head over to fiverr and to get one created.

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 2 years ago

  @vcarames

  Haha, sounds good! 👍

  0
• 

  Pierre Allard•135

  @RondellAllardPosted almost 2 years ago

  It is really an excellent touch that the submit button only changes on hover when a radio button is selected.

  I also love how your HTML is laid out. Easily readable so you know what is there.

  I have always seen the label tag be before the input or have the `input within the tags, doesn't having it after cause potential issues?

  I believe having the script in the header is the standard as well, using the defer attribute to load it after the page has been processed.

  The clip CSS property is deprecated. It is recommended that clip-path be used. Which I see you have. So many you can guide me through why both are used.

  Did you design the look prior to building or was it on the fly?

  I learnt a lot reviewing this. Thank you for taking the time to put in the effort you did. I am taking notes on how to do outstanding work as you did.

  1

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @RondellAllard

  Thank you for the compliments! 😊

  For the label, you can have them in any order since they are "linked" with the for attribute. The use of label is a must when using any type of input whether it is visually present or not for accessibility.

  For the script it depends on what the JS is doing. If my site was heavily reliant on the JS, then it would be better off on top, as you mentioned. But, since the JS in this challenge only job is to display/hide the content when a rating is selected, it does not have to be downloaded immediately.

  For visually hidden accessible content, these properties are currently the standard. The use of clip is for older outdated browsers. While the WebKit is for WebKit browser (Safari and Chrome). Since the content is visually hidden, you want it be hidden in every browser.

  I first create the challenge as designed by FEM and once complete, I then start planning my custom design (this is the part that takes the longest 😆).

  1

  

  Pierre Allard•135

  @RondellAllardPosted almost 2 years ago

  @vcarames Ok.

  Thank you for the feedback.

  I have learnt a lot from your feedback as well as your work.

  0
• 

  P

  Adham El Samahy•250

  @AdhamElSamahy909Posted almost 2 years ago

  I do not understand why you did add an h1 element with the text Interative Rating Component and adding a class that makes it visually hidden.

  0

  ---

  

  Erick Melchor•220

  @Melchor16Posted over 1 year ago

  @AdhamElSamahy909 Is a good practice tu put an h1 element at the beginning of your main content even if it's visually hidden, Here you can read why

  0