Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

Interactive Rating Component using HTML, CSS, bootstrap and jQuery

jquery, bootstrap
Loo_cee•230
@Loocee
A solution to the Interactive rating component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I learned to use JavaScript for DOM manipulation. I learned some new CSS properties like letter spacing which I used in the "submit" button. I also worked on using more standard units like "rem" and "%". In this project, I made use of some inline styles and did the rest in my stylesheet. Basically the frustrating part of this project was determining the exact color of the rating buttons(I had to go through some people's project to get the color, it was different from what was provided in the challenge style-guide.md). This is my first time using JavaScript/jQuery on my own without my tutor's guidance, so I'm proud of what I did. I also put a default rating in situations whereby the client didn't choose any value.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • nicodes•240
    @nicodes-dev
    Posted almost 3 years ago

    Hi! I have a few suggestions for your solution.

    • In this challenge it is not bad to add a default rating if the user didn't select a rating and clicked submit but I think it is better if you'll add a simple validation that won't allow the user to submit it without selecting a rating or you can also add an error message that tells the user that they haven't selected a rating before clicking submit.

    • I notice that in your media query, you use a max-width of 375px. Is this intended to only be displayed on a mobile device? If not, maybe you can try to make it responsive with adding more media query. I suggest that you use a min-width of 320px or 360px and just add a max-width on your parent container so it won't stretch too much.

    • The active class is not working properly, the background color and color only apply after selecting another button and it also allow multiple ratings to get an active class. You can use a loop to check whether your button should have an active class. You should use addClass and removeClass instead of toggleClass for this to work.

    Marked as helpful
  • Zsollt88•120
    @Zsollt88
    Posted almost 3 years ago

    Hi!

    Nice solution!

    After awhile there is some issue regarding the buttons' color-changing.

    You can use :focus pseudo class in buttons instead of your animate function.

    I hope it will be useful.

    Marked as helpful

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub