👋Hello, Frontend Mentor coding community.
👨🏼💻This is my solution for the Interactive rating component.
🎨 I added some custom features:
Hover EffectsCSS AnimationsCustom UI DesignI'll be happy to hear any feedback and advice!🤗
Hey Frank here 🙋♂️
the design is pretty sleek✨ the glass background looks nice and cool custom design by the way 🎯
i just wanted to point out a small detail that you might wanna consider, although I'm not sure if you intended to make the form function that way.
👉so, I'm unable to select a different number once I have clicked on one, and i think the form would be more user friendly if they were able to select a different number if they were to change their choice. that slight change could make the user experience a bit better
HAPPY CODING 😇
Hey Frank here 🙋♂️
You did a great job there! 🎯
I just wanted to point out a few minor details that you might wanna consider to make the component look better:
⭐ you could add the transition style property to the submit button & the numbers, which would smoothly animate its background color
you could achieve this by adding this property to you button & numbers, here's an example:
button { transition: all 0.3s ease; }
⭐ another thing i noticed was the numbers. they are oval-shaped, and would look better if they were circles. to get that you can specify an equal height and width for each of these numbers, and give a border-radius of 50%, and then add a bit of padding. here's an example:
.number { height: 28px; width: 28px; border-radius: 50%; padding: 12px; }
⭐ also, there's a bit of irregularity in the sizes of different components as the size of the screen changes
HAPPY CODING 😇
