Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 5 months ago

Interactive-rating-component

Bunchydo•530
@Bunchydo
A solution to the Interactive rating component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

I'm most proud of my ability to refactor repetitive code and create more reusable functions. For instance, I realized that I was repeatedly using similar code for handling elements and events, so I started using loops like forEach to make the process more efficient. This helped me write cleaner code that was easier to maintain. If I were to do things differently next time, I'd plan more thoroughly before starting the code to ensure that I can anticipate repetitive patterns earlier and avoid redundancy from the start.

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

One of the challenges I faced was managing space between elements, especially when it came to the end of a list or array. I initially had trouble with the layout not appearing properly because of the lack of space at the end of containers. To overcome this, I paid closer attention to the CSS margins and padding settings and tested them with different element sizes to ensure the design was responsive and visually balanced.

Another challenge was figuring out how to store and work with dynamic data inside a loop. I needed to store the last clicked button in a variable to manipulate it later. I overcame this by using a forEach loop to go through all the buttons, setting up event listeners, and storing the clicked button in a variable like selectedButton. This allowed me to keep track of the user’s interactions.

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

I’m interested in getting feedback on how I can improve my implementation of the interactive rating component, particularly with spacing and alignment. Specifically, I would appreciate suggestions on how to manage space between elements dynamically, especially when elements are added or removed.

Additionally, I would love to improve the efficiency of storing and updating data in dynamic loops. Right now, I use simple variables like selectedButton, but I feel like there might be a more scalable way to handle multiple data points at once, especially when scaling up the number of interactive components. Any suggestions or best practices on this would be helpful!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Enoch Mwanga•320
    @enochmwanga
    Posted 5 months ago

    Your code is well-organized—great job! I have a few suggestions to enhance its efficiency and maintainability:

    CSS Improvements

    Move common rules outside of media queries and keep only necessary overrides within them. This will make your styles cleaner and easier to maintain.

    Consider adding state styles using :hover and :active pseudo-classes for buttons. This will improve interactivity and reduce reliance on JavaScript for styling changes.

    JavaScript Enhancements

    Your use of buttons is well-structured! However, updating selectionNumber.textContent only after the submit button is clicked (instead of on every button press) would improve efficiency.

    If you have time, try implementing a radio group instead. This could streamline selection handling and improve accessibility.

    Happy coding!

    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
Frontend Mentor logo

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