Submitted 3 months ago

Interactive_Rating_Component

Utkarsha Nikam•120

@utkarshanik

Preview site View code

This is a solution for...Interactive rating component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

i have learned that how we can give priority to one class over another. It was also a good practice for adding Event listener. I will try to toggle between classes

What challenges did you encounter, and how did you overcome them?

I faced challenge in that rating component where i have to rate between 5 and that selected item should change its color also after submit second card should overlap first one with rating you have given in first. Adding event listener was quite challenging but i managed it.

What specific areas of your project would you like help with?

class management in css also some help in js.

Community feedback

mashofa•350
@mbank14Posted 3 months ago
Hello, there are a few things that might be helpful for you:

When I press a rating, for example, on number 2, then press the same number (2) again to cancel it, and finally press submit, the value in the val variable hasn't been cleared. This causes the "Thank You" card to display the value as 2 instead of 0. Perhaps you could also add a setTimeout after submitting, to return to the initial section.

For CSS, one suggestion would be to use fixed values like px for padding or width in the .image class. The same approach could be applied to the .span2 class as well.

For the mobile view, in the .rating class, you might want to add flex-direction: row to improve the layout.

Overall, everything looks great! Good job!
Marked as helpful
0

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