Submitted over 1 year ago

Interactive Rating Component 👻

バレンタイン 😈• 64,270

@VCarames

Preview site View code

This is a solution for...

Interactive rating component

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

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 1 year 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)! 😁

バレンタイン 😈• 64,270

@VCarames

Posted over 1 year 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.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 1 year ago

@vcarames

Haha, sounds good! 👍

Pierre Allard• 135

@RondellAllard

Posted over 1 year 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.

バレンタイン 😈• 64,270

@VCarames

Posted over 1 year 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 😆).

Pierre Allard• 135

@RondellAllard

Posted over 1 year ago

@vcarames Ok.

Thank you for the feedback.

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

Adham El Samahy• 190

@AdhamElSamahy909

Posted about 1 year 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.

Erick Melchor• 220

@Melchor16

Posted about 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

Please log in to post a comment

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