Submitted over 1 year ago

HTML5, CSS and JavaScript

Ana Popović• 10

@franeCode

Preview site View code

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is the first project that I am putting on Frontend mentor and I would appreciate your feedback. I've made it with HTML5 and CSS using flex. There are also a few lines of javaScript for functionality.

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted over 1 year ago

Hey there! 👋 Here are some suggestions to help improve your code:

Change width to max-width in your component’s container to make it responsive. You will also want to delete the height as it is unnecessary.
The proper way to build this challenge is to create a Form and inside of it, the “rating buttons” should be built using an Input Radio and it should have a Label Element attached to it.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🍂🦃

Marked as helpful

Ana Popović• 10

@franeCode

Posted over 1 year ago

@vcarames Thanks for taking the time to look into my code. I appreciate your advice and I’ll look into it :)

Wendy• 1,670

@wendyhamel

Posted over 1 year ago

Hi there, nice solution to the challenge here!

Two things I noticed.

On desktop it could be a bit larger. The card, the buttons and the spaces between and around the content.

The other thing I noticed is if you click a number, then click away, the highlight disappeared. It schould stay 'active' so a user can still see which number they selected.

Happy coding!

Marked as helpful

Ana Popović• 10

@franeCode

Posted over 1 year ago

Thank you @wendyhamel for the detailed review, I’ll change the desktop style.

I didn’t notice the other thing until you told me and I’m not sure how to do it. Could you give me a hint? I used hover and focus pseudo-classes on the buttons, I tried ‘active’ before but it didn’t work. Thanks again :)

Wendy• 1,670

@wendyhamel

Posted over 1 year ago

@franeCode Glad I could help. The button is not active anymore if you click away from it. You can give the active number a class with Javascript.

O, and your css is broken now.. there are still some lines left in the file from a merge conflict. May be you are still working on it as I write this, so ignore my comment then :)

Ana Popović• 10

@franeCode

Posted over 1 year ago

Thanks again Wendy :) I just start to learn GitHub last night so I made a little mess. I will work on it.

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