Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive Rating Component πŸ‘»

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Great challenge to practice styling radio inputs and obtaining their values.

To create the rating buttons and to ensure that they were fully accessible, they were built βš’οΈ using a form along with five radio inputs (each with their own label); this also prevents users from making more than one selection.

To announce any changes, when the thank you screen appears, I wrapped the "thank you" content in its own container along with a aria-live="polite".

For the JS, my eventListener is on the form as a submit.

Lastly, I took some inspiration from @correlucas own challenge, in regards to his use of border-radius.

All feedback is greatly appreciated! β™₯️

UPGRADES: 😎

  • Animation Entrance
  • Custom Design
  • Custom Gradient Colors
  • Animated Gradient Background

Community feedback

P
ApplePieGiraffeβ€’ 30,565

@ApplePieGiraffe

Posted

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

@VCarames

Posted

@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
P
ApplePieGiraffeβ€’ 30,565

@ApplePieGiraffe

Posted

@vcarames

Haha, sounds good! πŸ‘

0
Pierre Allardβ€’ 135

@RondellAllard

Posted

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

@VCarames

Posted

@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

@RondellAllard

Posted

@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

@AdhamElSamahy909

Posted

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

@Melchor16

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord