Submitted 6 months ago

Interactive Rating Component

Aaron Varga• 350

@digitalherding

Preview site View code

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

When building this project, I found that possibly this typeface/font requested for use was setting oddly high and to counter this, I had to add a margin-top. I usually never have this issue because I know how to use flexbox and grid with align-items: center and justify-content: center, etc., which is why I believe specifically the way this project's font is set within the typeface is why this was an unusual issue. It was not hard to counter/fix, but it was noticeable. With me being a perfectionist, I had to correct this issue, even if it was a small one.
I am still refreshing and advancing my JS skills, so quite possibly there are better ways to do what I did regarding my JS code, but I kept it simple. Simple does not always mean less code, I know!
If you have a better, more condensed way of doing the JS portion of this challenge, please share it with me! JS is what I am currently learning in more advanced ways. It will be appreciated! (Or confirm what I did was appropriate!)

Community feedback

Yari Morcus• 480

@YariMorcus

Posted 6 months ago

Hi Aaron,

First of all, I think you did a great job coming up with a solution for this challenge. It looks exactly like the design, it is functional and also responsive.

There is one thing I noticed and that is the following.

I can press the submit button without selecting a number. This results in the message You selected out of 5 (missing the number). You could give it a default rating number (which you should not do in a real application unless clearly indicating what this number will be), or you could also disable the button and enable it when the user selected a rating.

It appears you get to choose haha.

I hope you can do something with this feedback. If you still have questions, let me know.

If I made a mistake somewhere in this post, feel free to correct me and keep building awesome things :D.

Marked as helpful

Aaron Varga• 350

@digitalherding

Posted 6 months ago

@YariMorcus

Thank you for this feedback! Yes! I did not realize this. You made me realize I definitely did not do enough testing! ;) I really appreciate your time and feedback.

Aaron Varga• 350

@digitalherding

Posted 6 months ago

@YariMorcus

I adjusted my JS for when the user makes no selection! I just added a simple alert() message catch for now. Maybe later I will go in and add it on page, but for now I left it as an alert.

Thanks again for your feedback. It really helped!

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